Skip to content

Commit

Permalink
Diagram: update Data Binding code samples (#6920) (#6922)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vladaskorohodova
vladaskorohodova authored Dec 24, 2024
1 parent 2858307 commit ca90a1d
Show file tree
Hide file tree
Showing 4 changed files with 574 additions and 26 deletions.
10 changes: 5 additions & 5 deletions concepts/05 UI Components/Diagram/10 Data Binding/10 Node and Edge Arrays.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ During the binding process, the UI component creates a shape for every bound nod
$("#diagram").dxDiagram({
nodes: {
dataSource: new DevExpress.data.ArrayStore({
key: "this",
key: "id",
data: orgItems
}),
keyExpr: "id",
textExpr: "text",
},
edges: {
dataSource: new DevExpress.data.ArrayStore({
key: "this",
key: "id",
data: orgLinks
}),
keyExpr: "id",
Expand All @@ -39,7 +39,7 @@ During the binding process, the UI component creates a shape for every bound nod
});
<!-- tab: data.js -->
var orgItems = [{
const orgItems = [{
"id":"101",
"text":"Development",
},{
Expand All @@ -50,7 +50,7 @@ During the binding process, the UI component creates a shape for every bound nod
"text":"ASP.NET\nTeam",
}];

var orgLinks = [{
const orgLinks = [{
"id":"121",
"from":"101",
"to":"102",
Expand Down Expand Up @@ -243,7 +243,7 @@ During the binding process, the UI component creates a shape for every bound nod
##### React

<!-- tab: App.js -->
import React, { useState, useEffect } from "react";
import React from "react";
import Diagram, { Nodes, Edges } from "devextreme-react/diagram";
import ArrayStore from "devextreme/data/array_store";
import service from "./data.js";
Expand Down
6 changes: 3 additions & 3 deletions concepts/05 UI Components/Diagram/10 Data Binding/20 Linear Array.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ During the binding process, the UI component creates a shape for every bound nod
$("#diagram").dxDiagram({
nodes: {
dataSource: new DevExpress.data.ArrayStore({
key: "this",
key: "ID",
data: employees
}),
keyExpr: "ID",
Expand Down Expand Up @@ -186,12 +186,12 @@ During the binding process, the UI component creates a shape for every bound nod

export default {
components: {
DxDiagram, DxNodes, DxEdges
DxDiagram, DxNodes
},
data() {
return {
dataSource: new ArrayStore({
key: 'id',
key: 'ID',
data: service.getEmployees(),
})
};
Expand Down
237 changes: 233 additions & 4 deletions concepts/05 UI Components/Diagram/10 Data Binding/30 Hierarchical Array.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ Specify the following **required properties**: [nodes.keyExpr](/api-reference/10

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.

![Diagram - Node and Edge Arrays](/images/diagram/db-linear-array.png)

---
##### jQuery

Expand All @@ -18,7 +20,7 @@ During the binding process, the UI component creates a shape for every bound nod
$("#diagram").dxDiagram({
nodes: {
dataSource: new DevExpress.data.ArrayStore({
key: "this",
key: "ID",
data: employees
}),
keyExpr: "ID",
Expand All @@ -29,7 +31,7 @@ During the binding process, the UI component creates a shape for every bound nod
});

<!-- tab: data.js -->
var employees = [{
const employees = [{
"ID": 3,
"Full_Name": "Arthur Miller",
"Title": "CTO",
Expand Down Expand Up @@ -62,6 +64,233 @@ During the binding process, the UI component creates a shape for every bound nod
}]
}];

---
##### Angular

![Diagram - Node and Edge Arrays](/images/diagram/db-linear-array.png)
<!-- tab: app.component.html -->
<dx-diagram>
<dxo-nodes
[dataSource]="dataSource"
keyExpr="ID"
textExpr="Title"
itemsExpr="Items"
>
</dxo-nodes>
</dx-diagram>

<!-- tab: app.component.ts -->
import { Component } from '@angular/core';
import ArrayStore from "devextreme/data/array_store";
import { Service } from "./app.service";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [Service]
})

export class AppComponent {
dataSource: ArrayStore;
constructor(service: Service) {
this.dataSource = new ArrayStore({
key: "ID",
data: service.getEmployees(),
});
}
}

<!-- tab: app.service.ts -->
import { Injectable } from "@angular/core";

export class Employee {
ID: number;
Full_Name: string;
Title: string;
Items: Employee[];
}

const employees = [{
"ID": 3,
"Full_Name": "Arthur Miller",
"Title": "CTO",
"Items": [{
"ID": 6,
"Full_Name": "Brett Wade",
"Title": "IT Manager",
"Items": [{
"ID": 21,
"Full_Name": "Taylor Riley",
"Title": "Network Admin",
}, {
"ID": 23,
"Full_Name": "Wally Hobbs",
"Title": "Programmer",
}, {
"ID": 24,
"Full_Name": "Brad Jameson",
"Title": "Programmer",
}]
}, {
"ID": 9,
"Full_Name": "Barb Banks",
"Title": "Support Manager",
"Items": [{
"ID": 18,
"Full_Name": "James Anderson",
"Title": "Support Assistant",
}]
}]
}];

@Injectable()
export class Service {
getEmployees() {
return employees;
}
}

##### Vue

<!-- tab: App.vue -->
<template>
<DxDiagram>
<DxNodes
:data-source="dataSource"
:key-expr="'ID'"
:text-expr="'Title'"
:items-expr="'Items'"
/>
</DxDiagram>
</template>

<script>
import {
DxDiagram, DxNodes
} from 'devextreme-vue/diagram';
import ArrayStore from 'devextreme/data/array_store';
import service from './data.js';

export default {
components: {
DxDiagram, DxNodes
},
data() {
return {
dataSource: new ArrayStore({
key: 'ID',
data: service.getEmployees(),
})
};
}
};
</script>

<!-- tab: data.js -->
const employees = [{
"ID": 3,
"Full_Name": "Arthur Miller",
"Title": "CTO",
"Items": [{
"ID": 6,
"Full_Name": "Brett Wade",
"Title": "IT Manager",
"Items": [{
"ID": 21,
"Full_Name": "Taylor Riley",
"Title": "Network Admin",
}, {
"ID": 23,
"Full_Name": "Wally Hobbs",
"Title": "Programmer",
}, {
"ID": 24,
"Full_Name": "Brad Jameson",
"Title": "Programmer",
}]
}, {
"ID": 9,
"Full_Name": "Barb Banks",
"Title": "Support Manager",
"Items": [{
"ID": 18,
"Full_Name": "James Anderson",
"Title": "Support Assistant",
}]
}]
}];

export default {
getEmployees() {
return employees;
}
}

##### React

<!-- tab: App.js -->
import React from "react";
import Diagram, { Nodes } from "devextreme-react/diagram";
import ArrayStore from "devextreme/data/array_store";
import service from "./data.js";

const dataSource = new ArrayStore({
key: 'ID',
data: service.getEmployees(),
});

const App = () => {
return (
<Diagram>
<Nodes
dataSource={dataSource}
keyExpr="ID"
textExpr="Title"
itemsExpr="Items"
/>
</Diagram>
);
};

export default App;

<!-- tab: data.js -->
const employees = [{
"ID": 3,
"Full_Name": "Arthur Miller",
"Title": "CTO",
"Items": [{
"ID": 6,
"Full_Name": "Brett Wade",
"Title": "IT Manager",
"Items": [{
"ID": 21,
"Full_Name": "Taylor Riley",
"Title": "Network Admin",
}, {
"ID": 23,
"Full_Name": "Wally Hobbs",
"Title": "Programmer",
}, {
"ID": 24,
"Full_Name": "Brad Jameson",
"Title": "Programmer",
}]
}, {
"ID": 9,
"Full_Name": "Barb Banks",
"Title": "Support Manager",
"Items": [{
"ID": 18,
"Full_Name": "James Anderson",
"Title": "Support Assistant",
}]
}]
}];

export default {
getEmployees() {
return employees;
}
}

---
Loading

0 comments on commit ca90a1d

Please sign in to comment.