Issue with expanding and selecting the first node of kendo tree view

Question

I have a kendo tree view which is populated by a hierarchical data source. I want to set the parent node selected and expanded on load of the tree view. I have written the following expand and select to do so. But it is not working .Could anyone provide any solution?

    var treeData =  new kendo.data.HierarchicalDataSource({

    transport: {
        read: {
            url: NsMenuMaster.urls.getMenuTreeUrl,
            data: data,
            datatype: "json",
            type: "POST"
        }
    },
    schema: {
        model: {
            id: "MenuConfigUid",                  
            children: "Child"

        }
    }
});

$("#MenuTreelist").kendoTreeView({
    dataSource: treeData,
    dataTextField: ["MenuText"],
    dataValueField: ["MenuConfigUid"],
    height: 1000,
    template: kendo.template($("#treeview-template").html()),
    checkboxes: {
        template: "<input type='checkbox' name='StudentClassID' value='#= item.id #' />",
        checkChildren: true
    },
    select: NsMenuMaster.onSelect
});

 $("#MenuTreelist").getKendoTreeView().select(".k-first");
 $("#MenuTreelist").getKendoTreeView().expand(".k-first");

Answer 1

The place where you have the .select() and .expand() code is in the wrong spot. At the point at which you are currently calling them, there are not yet any nodes in the tree as the remote dataSource has not yet been populated.

You have to move your select and expand code to after the remote dataSource is read and the .k-first node exists.

You can do this by binding to the first dataBound event of TreeView, i.e:

$("#MenuTreelist").kendoTreeView({
    ....
});

var treeView = $("#MenuTreelist").getKendoTreeView();
treeView.one("dataBound", function () {
    treeView.select(".k-first");
    treeView.expand(".k-first");
});

Example: http://dojo.telerik.com/@Stephen/iYIBo