Kendo treeview ondemand load node selection fails after expand

[Anamika]

Hello,
I have a Kendo treeview with ondemand loading.I have a grid displaying objectids on right side and when clicked on a row on grid i use treeview expandpath showing all it's parent nodes. Now i want to select the node with the id after expanding and scroll to the node automatically. Here is my jquery code on grid row click event
$("#Grid").on("click", " tbody > tr", function () {

var datagrd = $("#Grid").data("kendoGrid").dataItem($(this));
alert(datagrd.ObjectID);
var rootDir = "@Url.Content("~/")";
$.ajax({
url: rootDir + "Objekt/LoadParents",
data: {
strSelectedObjectID: datagrd.ObjectID
},
success: function (data) {
if (data.result == "Error") {
alert(data.message);
} else {
alert(data);
var arrA = data.split(',');

var treeView = $('#treeview').data('kendoTreeView');
treeView.expandPath(arrA);
                    
                    var nodeDataItem = treeView.dataSource.get(datagrd.ObjectID);

var selectednode = treeView.findByUid(nodeDataItem.uid);
treeView.select(selectednode);
treeView.trigger("select", { node: selectednode });

}
}
});

Everything works fine and node is expanded but it does not get selected i have to manually scroll to the expanded node

Thanks

Anamika

    });

[Dimo]

Hello Anamika,

The expandPath method of the TreeView makes Ajax requests, so it is an asynchronous action. This means that selecting the newly loaded item and scrolling to it must be executed with a delay. You can do this in a one-time dataBound handler, which is attached before calling expandPath.

http://docs.telerik.com/kendo-ui/api/web/treeview#events-dataBound

One-time event handlers are attached in the same way as when using widgetObject.bind(), but instead you will be using widgetObject.one().

http://docs.telerik.com/kendo-ui/api/framework/widget#methods-one

http://docs.telerik.com/kendo-ui/basics/events-and-methods#bind-to-the-widget-events

Normally you don't need to use .trigger("select") after the .select() method.

Scrolling the selected item into view requires custom coding and can be achieved via...

http://www.telerik.com/forums/scroll-selected-node-into-viewport

Regards,
Dimo
Telerik

 

 

[Henry]

I'm trying to figure out the same thing. The problem is that how can you run the 'scroll to' function after expandPath() gets finished. I read that there is a callback for it, but it's not executed:

var treeView = $('#tree').data('kendoTreeView');
var selectedPath = [0, 1, 2];
treeView.one('dataBound', function () {
    treeView.expandPath(selectedPath, function () {
        // this doesn't get called
    });
});

Also, it seems it only expands the first node id given in the array. I tested calling it with two ids, and the second node doesn't get expanded. I double checked that the second id is returned with the first expand call, and that it has children.

I'm using:

* Kendo UI Complete v2014.1.318

Thanks for any help / suggestions.

[Dimo]

Hello Henry,

Here is a demo, which works as it should. Please compare with your implementation.

http://dojo.telerik.com/Inuw

It is important to note that we included a couple of fixes related to expandPath in the Q2 2014 Kendo UI version (2014.2.716), so upgrading is recommended.

Regards,
Dimo
Telerik