From f8b42d4dbef02a9e03805ed73fb6c37520f13166 Mon Sep 17 00:00:00 2001
From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com>
Date: Thu, 19 Sep 2024 12:03:19 +0400
Subject: [PATCH] Diagram - add snippets to Linear Array section (#6614)
 (#6620)

---
 .../10 Data Binding/20 Linear Array.md        | 269 +++++++++++++++++-
 1 file changed, 264 insertions(+), 5 deletions(-)

diff --git a/concepts/05 UI Components/Diagram/10 Data Binding/20 Linear Array.md b/concepts/05 UI Components/Diagram/10 Data Binding/20 Linear Array.md
index cccdb5dbc0..b8d8ecd2f4 100644
--- a/concepts/05 UI Components/Diagram/10 Data Binding/20 Linear Array.md	
+++ b/concepts/05 UI Components/Diagram/10 Data Binding/20 Linear Array.md	
@@ -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
 
@@ -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",
@@ -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)
\ No newline at end of file
+---
\ No newline at end of file