DevExtreme Vue - Data Binding

The Diagram can load external treelike and graph structures. The supported data structures are listed below.

The widget builds a diagram based on the auto-layout algorithm ("sugiyama" or "tree") specified by the nodes.autoLayout option. If you store node coordinates in your data source, define the nodes.leftExpr and nodes.topExpr options, and set the nodes.autoLayout option to "off".

Node and Edge Arrays

Bind the Diagram's nodes and edges collections to the appropriate plain lists of nodes and edges.

You should specify the following required properties.

  • nodes.keyExpr
  • edges.keyExpr
  • edges.fromExpr

  • edges.toExpr

    index.js
    data.js
    $(function() {
    $("#diagram").dxDiagram({
        nodes: {
            dataSource: orgItems
        },
        edges: {
            dataSource: orgLinks
        },
        layout: "layered"
    });
});
    var orgItems = [
    {  
        "id":"106",
        "text":"Development",
        "type":2
    },
    {  
        "id":"108",
        "text":"WPF\nTeam",
        "type":2
    },
    {  
        "id":"109",
        "text":"Javascript\nTeam",
        "type":2
    },
    // ...
];

var orgLinks = [  
    {  
        "id":"124",
        "from":"106",
        "to":"108",
    },
    {  
        "id":"125",
        "from":"106",
        "to":"109",
    },
    // ...
];

Linear Array

Use the dataSource option to bind the widget to a list where each record specifies its IDs and includes a parent node ID reference.

Specify the keyExpr and parentKeyExpr options, because of the data's plain structure. The Diagram uses information from key fields to transform plain data into a tree.

index.js
data.js
    $(function() {
        $("#diagram").dxDiagram({
            nodes: {
                dataSource: new DevExpress.data.ArrayStore({
                    key: "ID",
                    data: employees,
                }),
                keyExpr: "ID",
                textExpr: "Title",
                parentKeyExpr: "Head_ID"
            },
            layout: "tree"
        });
    });
    var employees = [{
        "ID": 1,
        "Full_Name": "John Heart",
        "Prefix": "Mr.",
        "Title": "CEO",
        "City": "Los Angeles",
        "State": "California",
        "Email": "jheart@dx-email.com",
        "Skype": "jheart_DX_skype",
        "Mobile_Phone": "(213) 555-9392",
        "Birth_Date": "1964-03-16",
        "Hire_Date": "1995-01-15"
    }, {
        "ID": 2,
        "Head_ID": 1,
        "Full_Name": "Samantha Bright",
        "Prefix": "Dr.",
        "Title": "COO",
        "City": "Los Angeles",
        "State": "California",
        "Email": "samanthab@dx-email.com",
        "Skype": "samanthab_DX_skype",
        "Mobile_Phone": "(213) 555-2858",
        "Birth_Date": "1966-05-02",
        "Hire_Date": "2004-05-24"
    },
    // ...
    ];

Hierarchical Array

Use the dataSource option to bind the widget to a hierarchical object.

Set the itemsExpr option to the name of the field that provides data for nested items because the data has a hierarchical structure. The keyExpr option should be specified as well.

index.js
data.js
    $(function() {
        $("#diagram").dxDiagram({
            nodes: {
                dataSource: new DevExpress.data.ArrayStore({
                    key: "this",
                    data: employees,
                }),
                textExpr: "Title",
                itemsExpr: "items"
            },
            layout: "tree"
        });
    });
    var employees = [{
        "Full_Name": "John Heart",
        "Prefix": "Mr.",
        "Title": "CEO",
        "City": "Los Angeles",
        "State": "California",
        "Email": "jheart@dx-email.com",
        "Skype": "jheart_DX_skype",
        "Mobile_Phone": "(213) 555-9392",
        "Birth_Date": "1964-03-16",
        "Hire_Date": "1995-01-15",
        "items": [{
            "Full_Name": "Samantha Bright",
            "Prefix": "Dr.",
            "Title": "COO",
            "City": "Los Angeles",
            "State": "California",
            "Email": "samanthab@dx-email.com",
            "Skype": "samanthab_DX_skype",
            "Mobile_Phone": "(213) 555-2858",
            "Birth_Date": "1966-05-02",
            "Hire_Date": "2004-05-24",
        }, {
            "Full_Name": "Arthur Miller",
            "Prefix": "Mr.",
            "Title": "CTO",
            "City": "Denver",
            "State": "Colorado",
            "Email": "arthurm@dx-email.com",
        "Skype": "arthurm_DX_skype",
            "Mobile_Phone": "(310) 555-8583",
        "Birth_Date": "1972-07-11",
            "Hire_Date": "2007-12-18",
            "items": [{
                "Full_Name": "Brett Wade",
                "Prefix": "Mr.",
                "Title": "IT Manager",
                "City": "Reno",
                "State": "Nevada",
                "Email": "brettw@dx-email.com",
                "Skype": "brettw_DX_skype",
                "Mobile_Phone": "(626) 555-0358",
                "Birth_Date": "1968-12-01",
                "Hire_Date": "2009-03-06",
    // ...