Skip to content

Commit eb7882a

Browse files
serhiipylypchuk1991serhiipylypchuk1991
authored
Merge pull request #69 from DHTMLX/sp-next-integration-guides-new
Add integration guides
2 parents 44c0f13 + ef6d3c4 commit eb7882a

File tree

7 files changed

+1034
-12068
lines changed

7 files changed

+1034
-12068
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,4 @@ yarn-error.log*
2424

2525
# Idea
2626
.idea
27+
package-lock.json

‎docs/index.md

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,29 @@ A gallery of live demos provides real-life examples of using DHTMLX widgets in w
6262

6363
A [set of CSS templates](https://dhtmlx.com/docs/products/dhtmlxSuite/how-to-create-javascript-applications/) is specially designed for various use cases that can be implemented using DHTMLX widgets. You can borrow the CSS code and apply the styles you like in your web app.
6464

65-
### Integration with Angular, React, and Vue.js
65+
### Integration with frameworks
66+
6667
[comment]: # (ссылки ниже должны уводить на страницы доки)
67-
DHTMLX Suite is compatible with any client-side framework. There are code examples of how to use DHTMLX widgets with [Angular](integration/suite_and_angular.md), [React](integration/suite_and_react.md), and [Vue.js](integration/suite_and_vue.md) available on our GitHub pages.
6868

69+
DHTMLX Suite is compatible with client-side frameworks. Refer to the following guides for more information on how to use DHTMLX Suite widgets with frameworks:
70+
- [Integration with React](integration/suite_and_react.md)
71+
- [Integration with Angular](integration/suite_and_angular.md)
72+
- [Integration with Vue](integration/suite_and_vue.md)
73+
- [Integration with Svelte](integration/suite_and_svelte.md)
74+
75+
You can import DHTMLX Suite into your project using `yarn` or `npm` package manager.
76+
77+
#### Installing trial DHTMLX Suite via npm or yarn
78+
79+
:::info
80+
If you want to use trial version of Suite, download the [**trial Suite package**](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml) and follow steps mentioned in the *README* file. Note that trial Suite is available 30 days only.
81+
:::
82+
83+
#### Installing PRO DHTMLX Suite via npm or yarn
84+
85+
:::info
86+
You can access the DHTMLX private **npm** directly in the [Client's Area](https://dhtmlx.com/clients/) by generating your login and password for **npm**. A detailed installation guide is also available there. Please note that access to the private **npm** is available only while your proprietary Suite license is active.
87+
:::
6988
### Integration with any backend technologies
7089

7190
Being a fully client-side library, DHTMLX Suite can be used with any backend. There is an example of integrating [DHTMLX Suite widgets with Node.js](https://github.com/DHTMLX/nodejs-suite-demo) in our GitHub repository.

‎docs/integration/suite_and_angular.md

Lines changed: 270 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,276 @@
11
---
2-
sidebar_label: Code examples with Angular
3-
title: Code examples of DHTMLX Widgets with Angular
4-
description: You can explore how to use DHTMLX Widgets with Angular. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
2+
sidebar_label: Integration with Angular
3+
title: Integration DHTML Suite with Angular
4+
description: You can explore how to use DHTMLX Suite Widgets with Angular. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
55
---
66

7-
# Code examples of how to use Widgets with Angular
7+
# Integration Suite widgets with Angular
88

9-
![](../assets/integration/work_with_frameworks.png)
9+
:::tip
10+
You should be familiar with basic concepts and patterns of **Angular** before reading this documentation. To refresh your knowledge, please refer to the [**Angular documentation**](https://angular.io/docs).
11+
:::
1012

11-
DHTMLX Suite is compatible with Angular. We have prepared code examples of how to use DHTMLX widgets with Angular.
13+
DHTMLX Suite is compatible with **Angular**. For more information, refer to the corresponding example on GitHub: [DHTMLX Suite with Angular Demo](https://github.com/DHTMLX/angular-suite-demo).
1214

13-
- To check online samples, please refer to the corresponding [Example on Replit](https://replit.com/@dhtmlx/dhtmlx-suite-with-angular).
14-
- To download samples, please check our GitHub repository: [DHTMLX Widgets + Angular](https://github.com/DHTMLX/angular-suite-demo). The README.md file provides all the necessary information on how to run the app in the development mode.
15+
## Create new Angular project
16+
17+
:::info
18+
Before you start to create a new project, install [**Angular CLI**](https://angular.io/cli) and [**Node.js**](https://nodejs.org/en/).
19+
:::
20+
21+
Step 1. Create a project and name it as ***my-angular-suite-app***:
22+
23+
~~~bash
24+
ng new my-angular-suite-app
25+
~~~
26+
27+
:::note
28+
If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app!
29+
:::
30+
31+
The command above installs all the necessary tools, so you don't need to run any additional commands.
32+
33+
Step 2. Go to the project directory:
34+
35+
~~~bash
36+
cd my-angular-suite-app
37+
~~~
38+
39+
Step 3. Install dependencies and start the dev server. Use the [**yarn**](https://yarnpkg.com/) package manager:
40+
41+
~~~json
42+
yarn
43+
yarn start
44+
~~~
45+
46+
The app should run on a localhost (for instance `http://localhost:3000`).
47+
48+
## Install Suite sources
49+
50+
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**](../../#installing-trial-dhtmlx-suite-via-npm-or-yarn)
51+
52+
## Create Angular component
53+
54+
Now you can create Angular components (wrappers) based on Suite widgets. For each complex Suite widget you can create a separate file (for instance [***grid.component.ts***](https://github.com/DHTMLX/angular-suite-demo/blob/master/src/app/MainContainer/Content/LeftContent/Grid/grid.component.ts)) in the [***src/***](https://github.com/DHTMLX/angular-suite-demo/tree/master/src) directory.
55+
56+
### Import source files
57+
58+
Open the ***grid.component.ts*** file and import the corresponding Suite widget. Note that:
59+
60+
- if you use PRO version and install the Suite package from a local folder, the import paths look as follows:
61+
62+
~~~jsx title="grid.component.ts"
63+
import { SuiteWidgetName } from "dhx-suite-package"; // import { Grid, Pagination, ... } from "dhx-suite-package";
64+
import "dhx-suite-package/codebase/suite.css"; // import Suite styles
65+
~~~
66+
67+
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***.
68+
69+
- if you use the trial version of Suite, the import paths look as follows:
70+
71+
~~~jsx title="grid.component.ts"
72+
import { SuiteWidgetName } from "@dhx/trial-suite"; // import { Grid, Pagination, ... } from "@dhx/trial-suite";
73+
import "@dhx/trial-suite/codebase/suite.min.css"; // import Suite styles
74+
~~~
75+
76+
In this guide you can find basic concepts on how to utilize the **trial** version of Suite widgets.
77+
78+
### Initialize Suite widget(s) within a container
79+
80+
To display a Suite widget on a page, you need to create a container and initialize a widget through the corresponding constructor:
81+
82+
~~~jsx {2,17,23,29-31} title="grid.component.ts"
83+
// import a Suite widget
84+
import { Grid } from "@dhx/trial-suite";
85+
// import Suite styles
86+
import "@dhx/trial-suite/codebase/suite.min.css";
87+
88+
import {
89+
Component,
90+
ElementRef,
91+
OnInit,
92+
OnDestroy,
93+
ViewChild
94+
} from "@angular/core";
95+
96+
@Component({
97+
selector: "app-grid",
98+
template: `<div class="component_container">
99+
<div #grid_container class="widget"></div>
100+
</div>`
101+
})
102+
103+
// create and export the Angular component
104+
export class GridComponent implements OnInit, OnDestroy {
105+
@ViewChild("grid_container", { static: true }) grid_container!: ElementRef;
106+
107+
private _grid_widget!: Grid;
108+
109+
ngOnInit() {
110+
// initialize a Suite widget
111+
this._grid_widget = new Grid(this.grid_container.nativeElement, {
112+
// configuration properties here
113+
});
114+
}
115+
116+
ngOnDestroy() {
117+
this._grid_widget?.destructor(); // destruct a Suite widget
118+
}
119+
}
120+
~~~
121+
122+
### Load data
123+
124+
To add data into a Suite widget, you need to provide a data set. You can create the [***app.data.ts***](https://github.com/DHTMLX/angular-suite-demo/blob/master/src/app/app.data.ts) file in the ***src/*** directory and add required data sets:
125+
126+
~~~jsx {2,27,29} title="app.data.ts"
127+
export function getData() {
128+
const gridData = [
129+
{
130+
time: new Date("Jan 28, 2021"),
131+
nights: 7,
132+
price: 68,
133+
contactPerson: "Yoshio Slater",
134+
contactEmail: "[email protected]"
135+
},
136+
{
137+
time: new Date("Apr 13, 2021")
138+
nights: 6,
139+
price: 66,
140+
contactPerson: "Christopher Kirk",
141+
contactEmail: "[email protected]"
142+
},
143+
{
144+
time: new Date("Jan 31, 2021"),
145+
nights: 15,
146+
price: 64,
147+
contactPerson: "Jana Meyers",
148+
contactEmail: "[email protected]"
149+
},
150+
// other data items
151+
];
152+
153+
const sidebarData = [ /* ... */ ];
154+
155+
return { gridData, sidebarData };
156+
}
157+
~~~
158+
159+
#### Specify data through the property
160+
161+
To load predefined data into a Suite widget, you need to perform the following steps:
162+
163+
1. Import predefined data
164+
2. Initialize the required data set
165+
3. Set the `data` property to the predefined data set within the Suite widget constructor
166+
167+
~~~jsx {1,4,27,30} title="grid.component.ts"
168+
import { Grid } from "@dhx/trial-suite";
169+
import "@dhx/trial-suite/codebase/suite.min.css";
170+
171+
import { getData } from "../../../app.data"; // 1. import predefined data
172+
173+
import {
174+
Component,
175+
ElementRef,
176+
OnInit,
177+
OnDestroy,
178+
ViewChild
179+
} from "@angular/core";
180+
181+
@Component({
182+
selector: "app-grid",
183+
template: `<div class="component_container">
184+
<div #grid_container class="widget"></div>
185+
</div>`
186+
})
187+
188+
export class GridComponent implements OnInit, OnDestroy {
189+
@ViewChild("grid_container", { static: true }) grid_container!: ElementRef;
190+
191+
private _grid_widget!: Grid;
192+
193+
ngOnInit() {
194+
const { gridData } = getData(); // 2. initialize the required data set
195+
// initialize a Suite widget with data
196+
this._grid_widget = new Grid(this.grid_container.nativeElement, {
197+
data: gridData, // 3. set the `data` property to the predefined data set
198+
// other configuration properties
199+
});
200+
}
201+
202+
ngOnDestroy() {
203+
this._grid_widget?.destructor(); // destruct a Suite widget
204+
}
205+
}
206+
~~~
207+
208+
:::tip
209+
For more information, refer to the **Data loading** section of the corresponding control: [Tree](tree/loading_data.md), [Toolbar](toolbar/load_data.md), [Sidebar](sidebar/data_loading.md), [Ribbon](ribbon/data_loading.md), [Menu](menu/data_loading.md), [List](list/load_data.md), [Grid](grid/data_loading.md), [DataView](dataview/data_loading.md), [Combobox](combobox/adding_options.md), [Chart](chart/data_loading.md), etc.
210+
:::
211+
212+
#### Specify data through the method
213+
214+
To load predefined data into a Suite widget, you can also call the `parse()` method:
215+
216+
~~~jsx {1,4,27,33} title="grid.component.ts"
217+
import { Grid } from "@dhx/trial-suite";
218+
import "@dhx/trial-suite/codebase/suite.min.css";
219+
220+
import { getData } from "../../../app.data"; // 1. import predefined data
221+
222+
import {
223+
Component,
224+
ElementRef,
225+
OnInit,
226+
OnDestroy,
227+
ViewChild
228+
} from "@angular/core";
229+
230+
@Component({
231+
selector: "app-grid",
232+
template: `<div class="component_container">
233+
<div #grid_container class="widget"></div>
234+
</div>`
235+
})
236+
237+
export class GridComponent implements OnInit, OnDestroy {
238+
@ViewChild("grid_container", { static: true }) grid_container!: ElementRef;
239+
240+
private _grid_widget!: Grid;
241+
242+
ngOnInit() {
243+
const { gridData } = getData(); // 2. initialize the required data set
244+
// initialize a Suite widget without data
245+
this._grid_widget = new Grid(this.grid_container.nativeElement, {
246+
// other configuration properties
247+
});
248+
249+
this._grid_widget.data.parse(gridData); // 3. call the parse() method and pass data as a parameter
250+
}
251+
252+
ngOnDestroy() {
253+
this._grid_widget?.destructor(); // destruct a Suite widget
254+
}
255+
}
256+
~~~
257+
258+
### Handle events
259+
260+
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.
261+
262+
~~~jsx {6-8} title="grid.component.ts"
263+
// ...
264+
265+
ngOnInit() {
266+
this._grid_widget = new Grid(this.grid_container.nativeElement, {});
267+
268+
this._grid_widget.events.on("scroll", function({top,left}){
269+
console.log("The grid is scrolled to "+top,left);
270+
});
271+
}
272+
273+
// ...
274+
~~~
275+
276+
Now you know how to integrate and configure any Suite widget with Angular. You can customize the code according to your specific requirements. The extended example you can find on [**GitHub**](https://github.com/DHTMLX/angular-suite-demo).

0 commit comments

Comments
 (0)