Kendo UI Treeview - Binding with Hierarchical data

Question

Sorry for asking basic question, I am using Kendo UI first time.

My question is:

I have hierarchical data returned from SQL Server Common Type Expression (CTE) in below format

Id ParentId Name

1 0 Name-1 (Level 0)

2 0 Name-2 (Level 0)

3 1 Name-3 (Level 1)

4 3 Name-4 (Level 2)

and so on...

I need to bind this data to Kendo UI Tree View control. All the samples I saw in Kendo UI docs deals with hard coded data and then there is HierachicalDataSoruce examples but in those examples hierarchical Json object is manually created (using a movie example). I am sure there would be some way to bind Kendo UI controls (tree view or grid) with hierarchical data directly, just I am not getting it.

If anyone comes across similar situation or know something then please let me know how to deal with this situation.

Thanks,

Answer 1

You'll need to provide the data in a format supported by Kendo's DataSource, e.g. a JavaScript array; in case of a treeview, each object in the array will (at minimum) need to have a property containing the text to display (item.text by default) and a property which contains an array of child nodes (item.items by default).

You can either transform your data on the server-side, or on the client-side, but ultimately, you'll have to define how to interpret your data somewhere so the treeview widget can render it.

You can remap some of those fields using the Kendo TreeView configuration, e.g. the text field:

$("#treeview").kendoTreeView({
  dataTextField: "Name",
  dataSource: items
});

For others, you can use the schema model of your data source configuration (also see Model.define), or if you need additional logic to map your existing item properties, you can use schema.parse.