Integration Suite widgets with Svelte
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.
Create new Svelte project
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):
npm create vite@latest
Check the details in the related article.
Step 2. Go to the project directory:
cd my-svelte-suite-app
Step 3. Install dependencies and start the dev server:
- if you use yarn, run the following commands:
yarn
yarn start
- if you use npm, run the following commands:
npm install
npm run dev
The app should run on a localhost (for instance http://localhost:3000).
Install Suite sources
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
Create Svelte component
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.
Import source files
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:
import { SuiteWidgetName } from "dhx-suite-package"; // import { Grid, Pagination, ... } from "dhx-suite-package";
import "dhx-suite-package/codebase/suite.css"; // import Suite styles
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:
import { SuiteWidgetName } from "@dhx/trial-suite"; // import { Grid, Pagination, ... } from "@dhx/trial-suite";
import "@dhx/trial-suite/codebase/suite.min.css"; // import Suite styles
In this guide you can find basic concepts on how to utilize the trial version of Suite widgets.
Initialize Suite widget(s) within a container
To display a Suite widget on a page, you need to create a container and initialize a widget through the corresponding constructor:
<script>
import { onMount, onDestroy } from "svelte";
// import a Suite widget
import { Grid } from "@dhx/trial-suite";
// import Suite styles
import "@dhx/trial-suite/codebase/suite.min.css";
let grid_container, // initialize container for a Suite widget
grid_widget;
onMount(() => {
// initialize a Suite widget
grid_widget = new Grid(grid_container, {
// configuration properties here
});
});
onDestroy(() => {
grid_widget?.destructor(); // destruct a Suite widget
});
</script>
<div class="component_container">
<div bind:this={grid_container} class="widget"></div>
</div>
Load data
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:
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"
},
// other data items
];
const sidebarData = [ /* ... */ ];
return { gridData, sidebarData };
}
Specify data through the property
To load predefined data into a Suite widget, you need to perform the following steps:
- Import predefined data
- Initialize the required data set
- Set the
dataproperty to the predefined data set within the Suite widget constructor
<script>
import { onMount, onDestroy } from "svelte";
import { Grid } from "@dhx/trial-suite";
import "@dhx/trial-suite/codebase/suite.min.css";
import { getData } from "../../data"; // 1. import predefined data
let { gridData } = getData(); // 2. initialize the required data set
let grid_container,
grid_widget;
onMount(() => {
// initialize a Suite widget with data
grid_widget = new Grid(grid_container, {
data: gridData, // 3. set the `data` property to the predefined data set
// other configuration properties here
});
});
onDestroy(() => {
grid_widget?.destructor();
});
</script>
<div class="component_container">
<div bind:this={grid_container} class="widget"></div>
</div>
Specify data through the method
To load predefined data into a Suite widget, you can also call the parse() method:
<script>
import { onMount, onDestroy } from "svelte";
import { Grid } from "@dhx/trial-suite";
import "@dhx/trial-suite/codebase/suite.min.css";
import { getData } from "../../data"; // 1. import predefined data
let { gridData } = getData(); // 2. initialize the required data set
let grid_container,
grid_widget;
onMount(() => {
// initialize a Suite widget without data
grid_widget = new Grid(grid_container, {
// configuration properties here
});
grid_widget.data.parse(gridData); // 3. call the parse() method and pass data as a parameter
});
onDestroy(() => {
grid_widget?.destructor();
});
</script>
<div class="component_container">
<div bind:this={grid_container} class="widget"></div>
</div>
Handle events
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.
// ...
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.