datasource for kendo dropdowntree with Variable

[James]

I was trying to implement Kendodropdowntree , I came across following situation which I am not able to understand

                $(dropdowntree).kendoDropDownTree({
                placeholder: "Select ...",
                height: "auto",
                dataSource:  //HARD CODED VALUE GOES HERE 
            });
       } 

Above example will work fine when , I hard code those datasource values. When I try to pass some variable there it will not work

var datatobind= somedata // data in exact format it is expected 
{
        
                $(dropdowntree).kendoDropDownTree({
                placeholder: "Select ...",
                height: "auto",
                dataSource:  datatobind
            });
       }

Even I tried passing variable of following type

var dataSourcetype = new kendo.data.HierarchicalDataSource({
        data: datatobind
    });

 
{
        
                $(dropdowntree).kendoDropDownTree({
                placeholder: "Select ...",
                height: "auto",
                dataSource:  dataSourcetype.options.data
            });
       }

But even above also doesn't solve problem, I am not able to get it , why passing exact same variable is not binding to data source.

[Lyuboslav]

Hello James,

The DropDownTree is using Hierarchical dataSource as described in the article linked below:

- https://docs.telerik.com/kendo-ui/controls/editors/dropdowntree/binding/data-binding#local-and-remote-data-binding

Thus, to bind the widget you can store the data in a variable like the snippet below:

var furnitures = [
            {
              text: "Furniture", expanded: true, items: [
                { text: "Tables & Chairs" },
                { text: "Sofas" },
                { text: "Occasional Furniture" }
              ]
            },
            {
              text: "Decor", items: [
                { text: "Bed Linen" },
                { text: "Curtains & Blinds" },
                { text: "Carpets" }
              ]
            }
          ];

Then, you can create Hierarchical DataSource with already saved data:

var localDataSource = new kendo.data.HierarchicalDataSource({ data: furnitures });

Below you could see more information about Hierarchical Datasource:

-https://docs.telerik.com/kendo-ui/framework/datasource/hierarchical 

Finally, I prepared a sample dojo with the example below where you could see how it works.

I hope this will help you.

Regards,
Lyuboslav
Progress Telerik