Skip to content

Commit

Permalink
Diagram - add snippets to Linear Array section (#6614) (#6621)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vladaskorohodova
vladaskorohodova authored Sep 19, 2024
1 parent 1558300 commit abb5600
Showing 1 changed file with 264 additions and 5 deletions.
269 changes: 264 additions & 5 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 @@ -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 a connector between every pair of nodes linked by the _Key_ - _Parent Key_ reference. Note that edges are not maintained as entities in a data source, thus a detached connector disappears after rebinding.

![Diagram - Linear Array](/images/diagram/db-linear-array.png)

---
##### jQuery

Expand All @@ -23,14 +25,13 @@ During the binding process, the UI component creates a shape for every bound nod
}),
keyExpr: "ID",
parentKeyExpr: "Head_ID",
textExpr: "Title",
heightExpr: function() {return 0.4}
textExpr: "Title"
},
});
});

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

---
##### Angular

<!-- tab: app.component.html -->
<dx-diagram>
<dxo-nodes
[dataSource]="dataSource"
keyExpr="ID"
textExpr="Title"
parentKeyExpr="Head_ID"
>
</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;
Head_ID?: number;
Full_Name: string;
Title: string;
}

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

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

##### Vue

<!-- tab: App.vue -->
<template>
<DxDiagram>
<DxNodes
:data-source="dataSource"
:key-expr="'ID'"
:text-expr="'Title'"
:parent-key-expr="'Head_ID'"
/>
</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, DxEdges
},
data() {
return {
dataSource: new ArrayStore({
key: 'id',
data: service.getEmployees(),
})
};
}
};
</script>

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

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

<!-- 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"
parentKeyExpr="Head_ID"
/>
</Diagram>
);
};

export default App;

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

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

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

0 comments on commit abb5600

Please sign in to comment.