CODEWITHSUNDEEP
kendo-uikendo-treeview
Thomas.Benz
Thomas.Benz

Reputation: 8599

How to programmatically select the root node of Kendo UI treeview

I am a Kendo UI newbie. My Asp.net MVC application has a Kendo UI treeview which is set up like follows. Each tree node has a unique Id (e.g. EmployeeId which is integer). How can I programmatically select the root node (which has Id of 1) of Kendo UI treeview and the root node's background color should be high-lighted ? Thank you for your help.

           var _root = new kendo.data.HierarchicalDataSource({
                transport: {
                    read: {
                        cache: false,
                        url: "/Employee/GetEmployees",
                        dataType: "json",
                        data: { employeeId: _selectedId}
                    }
                },
                schema: {
                    model: {
                        id: "Id",
                        hasChildren: "HasChildren",
                        expanded: "expanded",
                        parentId: "parentId",
                        ItemType: "ItemType"
                    }
                }
            });

            _tree = $("#treeView").kendoTreeView({
                dataSource: _root,
                dataTextField: "Name",
                loadOnDemand: true,                
                dataImageUrlField: "Image",
                dataBound: function (e) {
                    handleTreeDataBound(e);
                },
                select: function (e) {
                    handleSelect(e.node);
                }
            });

            treeViewCtrl = $("#treeView").data("kendoTreeView");

Upvotes: 4

Views: 10497

Answers (3)

Sven Möhring
Sven Möhring

Reputation: 860

You can also use this little piece of code: 

treeview.select($('.k-item:first'));

This selects the root node. You could also expand it using: 

treeview.expand($('.k-item:first'));

Upvotes: 3

cheino
cheino

Reputation: 175

Another way to get all root nodes if you have more than one is by using a CSS selector to get immediate children li nodes of the treeview ul. From there, you can get the dataItem for each root.

$("#treeview").find("ul > li").each(function () {
     var dataItem = treeView.dataItem($(this));
     console.log(dataItem.text);
});

Upvotes: 2

Lars Höppner
Lars Höppner

Reputation: 18402

Using the treeview's select method, this is how you select the first node:

treeViewCtrl.select($("#treeView").find(".k-item").first());

If you have more than one root node, then you'll have to use the dataItem method to get the data item and compare its id with the one you want to select.

Upvotes: 2

Related Questions