New to Telerik UI for ASP.NET Core? Download free 30-day trial

Local Binding

You can bind the OrgChart to local data by using its API.

Binding to a Local JSON Array

The following example demonstrates how to bind the OrgChart to a JSON array available on the client.

@(Html.Kendo().OrgChart<Kendo.Mvc.Examples.Models.OrgChartEmployeeViewModel>()
    .Name("orgchart")
)

<script>
    $(document).ready(function () {
        var employees = [
            {
                "ID": 1,
                "Name": "Daryl Sweeney",
                "Position": "CEO",
            },
            {
                "ID": 2,
                "ParentID": 1,
                "Name": "Guy Wooten",
                "Position": "Chief Technical Officer",
            },
            {
                "ID": 3,
                "ParentID": 1,
                "Name": "Priscilla Frank",
                "Position": "Chief Product Officer",
            },
            {
                "ID": 4,
                "ParentID": 3,
                "Name": "Ursula Holmes",
                "Position": "EVP, Product Strategy",
            },
            {
                "ID": 5,
                "ParentID": 1,
                "Name": "Anika Vega",
                "Position": "Chief Process Officer",
            }
        ];

        var orgchart = $("#orgchart").data("kendoOrgChart");
        var dataSource = new kendo.data.OrgChartDataSource({
            data: employees,
            schema: {
                model: {
                    id: "ID",
                    parentId: "ParentID",
                    expanded: true,
                    fields: {
                        Id: { type: "number", editable: false, nullable: false },
                        title: { field: "Position", nullable: true },
                        name: { field: "Name" }
                    }
                }
            }
        });

        orgchart.setDataSource(dataSource);
    });
</script>

See Also

In this article
Not finding the help you need? Improve this article