Skip to content

Commit 824d08a

Browse files
vladaskorohodovavladaskorohodova
authored
Diagram: update Data Binding code samples (DevExpress#6921)
1 parent a27c305 commit 824d08a

File tree

4 files changed

+574
-26
lines changed

4 files changed

+574
-26
lines changed

‎concepts/05 UI Components/Diagram/10 Data Binding/10 Node and Edge Arrays.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ During the binding process, the UI component creates a shape for every bound nod
2020
$("#diagram").dxDiagram({
2121
nodes: {
2222
dataSource: new DevExpress.data.ArrayStore({
23-
key: "this",
23+
key: "id",
2424
data: orgItems
2525
}),
2626
keyExpr: "id",
2727
textExpr: "text",
2828
},
2929
edges: {
3030
dataSource: new DevExpress.data.ArrayStore({
31-
key: "this",
31+
key: "id",
3232
data: orgLinks
3333
}),
3434
keyExpr: "id",
@@ -39,7 +39,7 @@ During the binding process, the UI component creates a shape for every bound nod
3939
});
4040
4141
<!-- tab: data.js -->
42-
var orgItems = [{
42+
const orgItems = [{
4343
"id":"101",
4444
"text":"Development",
4545
},{
@@ -50,7 +50,7 @@ During the binding process, the UI component creates a shape for every bound nod
5050
"text":"ASP.NET\nTeam",
5151
}];
5252

53-
var orgLinks = [{
53+
const orgLinks = [{
5454
"id":"121",
5555
"from":"101",
5656
"to":"102",
@@ -243,7 +243,7 @@ During the binding process, the UI component creates a shape for every bound nod
243243
##### React
244244

245245
<!-- tab: App.js -->
246-
import React, { useState, useEffect } from "react";
246+
import React from "react";
247247
import Diagram, { Nodes, Edges } from "devextreme-react/diagram";
248248
import ArrayStore from "devextreme/data/array_store";
249249
import service from "./data.js";

‎concepts/05 UI Components/Diagram/10 Data Binding/20 Linear Array.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ During the binding process, the UI component creates a shape for every bound nod
2020
$("#diagram").dxDiagram({
2121
nodes: {
2222
dataSource: new DevExpress.data.ArrayStore({
23-
key: "this",
23+
key: "ID",
2424
data: employees
2525
}),
2626
keyExpr: "ID",
@@ -186,12 +186,12 @@ During the binding process, the UI component creates a shape for every bound nod
186186

187187
export default {
188188
components: {
189-
DxDiagram, DxNodes, DxEdges
189+
DxDiagram, DxNodes
190190
},
191191
data() {
192192
return {
193193
dataSource: new ArrayStore({
194-
key: 'id',
194+
key: 'ID',
195195
data: service.getEmployees(),
196196
})
197197
};

‎concepts/05 UI Components/Diagram/10 Data Binding/30 Hierarchical Array.md‎

Lines changed: 233 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ Specify the following **required properties**: [nodes.keyExpr](/api-reference/10
1010

1111
During the binding process, the UI component creates a shape for every bound node and all connectors that are between a node and its children. Note that the edges are not maintained as entities in a data source, thus the detached connector disappears after it is rebound.
1212

13+
![Diagram - Node and Edge Arrays](/images/diagram/db-linear-array.png)
14+
1315
---
1416
##### jQuery
1517

@@ -18,7 +20,7 @@ During the binding process, the UI component creates a shape for every bound nod
1820
$("#diagram").dxDiagram({
1921
nodes: {
2022
dataSource: new DevExpress.data.ArrayStore({
21-
key: "this",
23+
key: "ID",
2224
data: employees
2325
}),
2426
keyExpr: "ID",
@@ -29,7 +31,7 @@ During the binding process, the UI component creates a shape for every bound nod
2931
});
3032

3133
<!-- tab: data.js -->
32-
var employees = [{
34+
const employees = [{
3335
"ID": 3,
3436
"Full_Name": "Arthur Miller",
3537
"Title": "CTO",
@@ -62,6 +64,233 @@ During the binding process, the UI component creates a shape for every bound nod
6264
}]
6365
}];
6466

65-
---
67+
##### Angular
6668

67-
![Diagram - Node and Edge Arrays](/images/diagram/db-linear-array.png)
69+
<!-- tab: app.component.html -->
70+
<dx-diagram>
71+
<dxo-nodes
72+
[dataSource]="dataSource"
73+
keyExpr="ID"
74+
textExpr="Title"
75+
itemsExpr="Items"
76+
>
77+
</dxo-nodes>
78+
</dx-diagram>
79+
80+
<!-- tab: app.component.ts -->
81+
import { Component } from '@angular/core';
82+
import ArrayStore from "devextreme/data/array_store";
83+
import { Service } from "./app.service";
84+
85+
@Component({
86+
selector: 'app-root',
87+
templateUrl: './app.component.html',
88+
styleUrls: ['./app.component.css'],
89+
providers: [Service]
90+
})
91+
92+
export class AppComponent {
93+
dataSource: ArrayStore;
94+
constructor(service: Service) {
95+
this.dataSource = new ArrayStore({
96+
key: "ID",
97+
data: service.getEmployees(),
98+
});
99+
}
100+
}
101+
102+
<!-- tab: app.service.ts -->
103+
import { Injectable } from "@angular/core";
104+
105+
export class Employee {
106+
ID: number;
107+
Full_Name: string;
108+
Title: string;
109+
Items: Employee[];
110+
}
111+
112+
const employees = [{
113+
"ID": 3,
114+
"Full_Name": "Arthur Miller",
115+
"Title": "CTO",
116+
"Items": [{
117+
"ID": 6,
118+
"Full_Name": "Brett Wade",
119+
"Title": "IT Manager",
120+
"Items": [{
121+
"ID": 21,
122+
"Full_Name": "Taylor Riley",
123+
"Title": "Network Admin",
124+
}, {
125+
"ID": 23,
126+
"Full_Name": "Wally Hobbs",
127+
"Title": "Programmer",
128+
}, {
129+
"ID": 24,
130+
"Full_Name": "Brad Jameson",
131+
"Title": "Programmer",
132+
}]
133+
}, {
134+
"ID": 9,
135+
"Full_Name": "Barb Banks",
136+
"Title": "Support Manager",
137+
"Items": [{
138+
"ID": 18,
139+
"Full_Name": "James Anderson",
140+
"Title": "Support Assistant",
141+
}]
142+
}]
143+
}];
144+
145+
@Injectable()
146+
export class Service {
147+
getEmployees() {
148+
return employees;
149+
}
150+
}
151+
152+
##### Vue
153+
154+
<!-- tab: App.vue -->
155+
<template>
156+
<DxDiagram>
157+
<DxNodes
158+
:data-source="dataSource"
159+
:key-expr="'ID'"
160+
:text-expr="'Title'"
161+
:items-expr="'Items'"
162+
/>
163+
</DxDiagram>
164+
</template>
165+
166+
<script>
167+
import {
168+
DxDiagram, DxNodes
169+
} from 'devextreme-vue/diagram';
170+
import ArrayStore from 'devextreme/data/array_store';
171+
import service from './data.js';
172+
173+
export default {
174+
components: {
175+
DxDiagram, DxNodes
176+
},
177+
data() {
178+
return {
179+
dataSource: new ArrayStore({
180+
key: 'ID',
181+
data: service.getEmployees(),
182+
})
183+
};
184+
}
185+
};
186+
</script>
187+
188+
<!-- tab: data.js -->
189+
const employees = [{
190+
"ID": 3,
191+
"Full_Name": "Arthur Miller",
192+
"Title": "CTO",
193+
"Items": [{
194+
"ID": 6,
195+
"Full_Name": "Brett Wade",
196+
"Title": "IT Manager",
197+
"Items": [{
198+
"ID": 21,
199+
"Full_Name": "Taylor Riley",
200+
"Title": "Network Admin",
201+
}, {
202+
"ID": 23,
203+
"Full_Name": "Wally Hobbs",
204+
"Title": "Programmer",
205+
}, {
206+
"ID": 24,
207+
"Full_Name": "Brad Jameson",
208+
"Title": "Programmer",
209+
}]
210+
}, {
211+
"ID": 9,
212+
"Full_Name": "Barb Banks",
213+
"Title": "Support Manager",
214+
"Items": [{
215+
"ID": 18,
216+
"Full_Name": "James Anderson",
217+
"Title": "Support Assistant",
218+
}]
219+
}]
220+
}];
221+
222+
export default {
223+
getEmployees() {
224+
return employees;
225+
}
226+
}
227+
228+
##### React
229+
230+
<!-- tab: App.js -->
231+
import React from "react";
232+
import Diagram, { Nodes } from "devextreme-react/diagram";
233+
import ArrayStore from "devextreme/data/array_store";
234+
import service from "./data.js";
235+
236+
const dataSource = new ArrayStore({
237+
key: 'ID',
238+
data: service.getEmployees(),
239+
});
240+
241+
const App = () => {
242+
return (
243+
<Diagram>
244+
<Nodes
245+
dataSource={dataSource}
246+
keyExpr="ID"
247+
textExpr="Title"
248+
itemsExpr="Items"
249+
/>
250+
</Diagram>
251+
);
252+
};
253+
254+
export default App;
255+
256+
<!-- tab: data.js -->
257+
const employees = [{
258+
"ID": 3,
259+
"Full_Name": "Arthur Miller",
260+
"Title": "CTO",
261+
"Items": [{
262+
"ID": 6,
263+
"Full_Name": "Brett Wade",
264+
"Title": "IT Manager",
265+
"Items": [{
266+
"ID": 21,
267+
"Full_Name": "Taylor Riley",
268+
"Title": "Network Admin",
269+
}, {
270+
"ID": 23,
271+
"Full_Name": "Wally Hobbs",
272+
"Title": "Programmer",
273+
}, {
274+
"ID": 24,
275+
"Full_Name": "Brad Jameson",
276+
"Title": "Programmer",
277+
}]
278+
}, {
279+
"ID": 9,
280+
"Full_Name": "Barb Banks",
281+
"Title": "Support Manager",
282+
"Items": [{
283+
"ID": 18,
284+
"Full_Name": "James Anderson",
285+
"Title": "Support Assistant",
286+
}]
287+
}]
288+
}];
289+
290+
export default {
291+
getEmployees() {
292+
return employees;
293+
}
294+
}
295+
296+
---

0 commit comments

Comments
 (0)