Question

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");
Was it helpful?

Solution 2

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.

OTHER TIPS

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'));

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);
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top