Skip to content

Latest commit

 

History

History
104 lines (87 loc) · 4.13 KB

binding.md

File metadata and controls

104 lines (87 loc) · 4.13 KB
title page_title description slug position
Data Binding
Kendo UI for jQuery OrgChart Documentation - OrgChart Data Binding
Get started with the Kendo UI for jQuery OrgChart and bind the widget to local or remote data.
databinding_kendoui_orgchart_widget
2

Data Binding

The OrgChart provides options for binding it to local arrays and remote data.

Binding to Local Data

The following example demonstrates how to bind an OrgChart to a local data array.

    <div id="orgchart"></div>

    <script>
      var data = [
        { Id: 1, Name: "Gevin Bell", Title: "CEO", ParentId: null, Expanded: true},
        { Id: 2, Name: "Clevey Thrustfield", Title: "COO", ParentId: 1, Expanded: true },
        { Id: 3, Name: "Carol Baker", Title: "CFO", ParentId: 1 },
        { Id: 4, Name: "Kendra Howell", Title: "CMO", ParentId: 2},
        { Id: 5, Name: "Sean Rusell", Title: "Financial Manager", ParentId: 3},
        { Id: 6, Name: "Steven North", Title: "Senior Manager", ParentId: 3 },
        { Id: 7, Name: "Michelle Hudson", Title: "Operations Manager", ParentId: 2},
        { Id: 8, Name: "Andrew Berry", Title: "Accountant", ParentId: 5 }            
      ];

      var orgChartDataSource = new kendo.data.OrgChartDataSource({
        data: data,
        schema: {
          model: {            
            Id: "id",
            parentId: "parentId",
            fields: {
              id: { field: "Id", type: "number", nullable: false },
              parentId: { field: "ParentId", nullable: true},
              title: { field: "Title",  nullable: true },
              name: { field: "Name" },
              expanded: { field: "Expanded" }
            }
          }
        }
      });

      $("#orgchart").kendoOrgChart({            
        dataSource: orgChartDataSource
      });
    </script>

Binding to Remote Data

You can also bind the OrgChart to remote data. Remote data binding enables the retrieval of data from the server. For more information, refer to the article on [using the Kendo UI DataSource]({% slug getting_started_kendoui_remote_data_binding %}).

The Kendo UI OrgChart supports lazy loading. Whether all nodes will be loaded on the initial request or the nodes will be loaded on demand depends on the respective read endpoint. If the endpoint returns the items per node, additional request will be sent to the server for loading the child nodes when the parent node gets expanded.

The following example demonstrates how to enable remote binding for the OrgChart by setting the DataSource transport configuration.


     <div id="orgchart"></div>

    <script>
        var crudServiceBaseUrl = "http://localhost/kendo-ui-service";
        $("#orgchart").kendoOrgChart({
            editable: false,
            dataSource: {
                transport: {
                    read: {
                        url: crudServiceBaseUrl + "/EmployeesOrgChart",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "Id",
                        parentId: "ParentId",
                        expanded: true,
                        fields: {
                            Id: { type: "number", editable: false, nullable: false },
                            ParentId: { field: "ParentId", nullable: true },
                            title: { field: "Position", nullable: true },
                            hasChildren: { field: "HasChildren", nullable: true },
                            avatar: { field: "Avatar", nullable: true },
                            name: { field: "FullName" }
                        }
                    }
                }
            }
        });
    </script>

See Also