Data Binding

As of the Kendo UI R2 2019 release, you can use the HierarchicalDataSource for binding widgets to data.

Binding to Local Data

The following example demonstrates how to create a Menu and bind it to a local data source.

<ul id="menu"></ul>

<script>
$(document).ready(function() {
    $("#menu").kendoMenu({
        dataSource: [
            {
                text: "Item 1",
                expanded: true,
                items: [
                    { text: "Item 1.1" },
                    { text: "Item 1.2" }
                ]
            },
            { text: "Item 2" }
        ]
    })
});
</script>

Binding to Remote Data

The following example demonstrates how to create a Menu and bind it to a remote HierarchicalDataSource.

<ul id="menu"></ul>

<script>
$(document).ready(function() {
    $("#menu").kendoMenu({
        dataTextField: "FullName",
        dataSource: {
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/Employees",
                    dataType: "jsonp"
                }
            },
            schema: {
                model: {
                    id: "EmployeeId",
                    hasChildren: "HasEmployees"
                }
            }
        }
    })
});
</script>

See Also

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