Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.dhtmlx.com/suite/integration/suite_and_svelte/ below:

Integration with Svelte | DHTMLX Suite 9 Docs

tip

You should be familiar with the basic concepts and patterns of Svelte before reading this documentation. To refresh your knowledge, please refer to the Svelte documentation.

DHTMLX Suite is compatible with Svelte. For more information, refer to the corresponding example on GitHub: DHTMLX Suite with Svelte Demo.

info

Before you start to create a new project, install Vite (optional) and Node.js.

Step 1. Create a project and name it as my-svelte-suite-app:

There are several ways on how to create a Svelte project:

• you can use the SvelteKit

or

• you can also use Svelte with Vite (but without SvelteKit):

Check the details in the related article.

Step 2. Go to the project directory:

Step 3. Install dependencies and start the dev server:

• if you use yarn, run the following commands:

• if you use npm, run the following commands:

The app should run on a localhost (for instance http://localhost:3000).

Install the DHTMLX Suite library to get access to Suite widgets. Refer to the following topic for more information: Installing DHTMLX Suite via npm or yarn

Now you can create Svelte components (wrappers) based on Suite widgets. For each complex Suite widget you can create a separate file (for instance Grid.svelte) in the src/ directory.

Open the Grid.svelte file and import the corresponding Suite widget. Note that:

• if you use PRO version and install the Suite package from a local folder, the import paths look as follows:

Grid.svelte

import { SuiteWidgetName } from "dhx-suite-package"; 
import "dhx-suite-package/codebase/suite.css"; 

Note that depending on the used package, the source files can be minified. In this case, make sure that you import the CSS file as suite.min.css.

• if you use the trial version of Suite, the import paths look as follows:

Grid.svelte

import { SuiteWidgetName } from "@dhx/trial-suite"; 
import "@dhx/trial-suite/codebase/suite.min.css"; 

In this guide you can find basic concepts on how to utilize the trial version of Suite widgets.

To display a Suite widget on a page, you need to create a container and initialize a widget through the corresponding constructor:

Grid.svelte

<script>
import { onMount, onDestroy } from "svelte";

import { Grid } from "@dhx/trial-suite";

import "@dhx/trial-suite/codebase/suite.min.css"; 

let grid_container, 
    grid_widget;

onMount(() => {
    
    grid_widget = new Grid(grid_container, {
       
    });
});

onDestroy(() => {
    grid_widget?.destructor(); 
});
</script>

<div class="component_container">
    <div bind:this={grid_container} class="widget"></div>
</div>

To add data into a Suite widget, you need to provide a data set. You can create the data.js file in the src/ directory and add required data sets:

data.js

export function getData() {
    const gridData = [
        {
            time: new Date("Jan 28, 2021"),
            nights: 7,
            price: 68,
            contactPerson: "Yoshio Slater",
            contactEmail: "phasellus.fermentum@yahoo.net"
        },
        {
            time: new Date("Apr 13, 2021")
            nights: 6,
            price: 66,
            contactPerson: "Christopher Kirk",
            contactEmail: "posuere.vulputate.lacus@outlook.org"
        },
        {
            time: new Date("Jan 31, 2021"),
            nights: 15,
            price: 64,
            contactPerson: "Jana Meyers",
            contactEmail: "mollis@aol.edu"
        }, 
        
    ];

    const sidebarData = [  ];

    return { gridData, sidebarData };
}

To load predefined data into a Suite widget, you need to perform the following steps:

1. Import predefined data
2. Initialize the required data set
3. Set the data property to the predefined data set within the Suite widget constructor

Grid.svelte

<script>
import { onMount, onDestroy } from "svelte";
import { Grid } from "@dhx/trial-suite";
import "@dhx/trial-suite/codebase/suite.min.css"; 

import { getData } from "../../data"; 

let { gridData } = getData(); 

let grid_container,
    grid_widget;

onMount(() => {
    
    grid_widget = new Grid(grid_container, {
        data: gridData, 
        
    });
});

onDestroy(() => {
    grid_widget?.destructor();
});
</script>

<div class="component_container">
    <div bind:this={grid_container} class="widget"></div>
</div>

tip

For more information, refer to the Data loading section of the corresponding control: Tree, Toolbar, Sidebar, Ribbon, Menu, List, Grid, DataView, Combobox, Chart, etc.

To load predefined data into a Suite widget, you can also call the parse() method:

Grid.svelte

<script>
import { onMount, onDestroy } from "svelte";
import { Grid } from "@dhx/trial-suite";
import "@dhx/trial-suite/codebase/suite.min.css"; 

import { getData } from "../../data"; 

let { gridData } = getData(); 

let grid_container, 
    grid_widget;

onMount(() => {
    
    grid_widget = new Grid(grid_container, {
       
    });

    grid_widget.data.parse(gridData); 
});

onDestroy(() => {
    grid_widget?.destructor();
});
</script>

<div class="component_container">
    <div bind:this={grid_container} class="widget"></div>
</div>

When a user performs some action in a Suite widget, an event is fired. You can use this event to detect an action and run the required code.

Grid.svelte

onMount(() => {
    grid_widget = new Grid(grid_container, {});

    grid_widget.events.on("scroll", function({top,left}){
        console.log("The grid is scrolled to "+top,left);
    });
});

Now you know how to integrate and configure any Suite widget with Svelte. You can customize the code according to your specific requirements. The extended example you can find on GitHub.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4