How to expand and select to a specific item after read

[Christopher]

I have a Kendo TreeView where I need to programmatically reload the items via dataSource.read(), then after that, automatically expand down to and select the item that was selected before the read().  I have tried everything I can find via Google, and I just can't seem to make it work (neither the expand nor the select works). 

Here's what I have so far:

var componentTreeView = $("#componentTreeView").data("kendoTreeView");
var selectedNodeElement = componentTreeView.select();
var selectedNode = componentTreeView.dataItem(selectedNodeElement);
var id = selectedNode.id;

componentTreeView.dataSource.read();

// get DataSourceItem by given id
var nodeDataItem = componentTreeView.dataSource.get(id);

//get node within treeview widget by uid
var node = componentTreeView.findByUid(nodeDataItem.uid);
var dataItem = componentTreeView.dataItem(node);
componentTreeView.expandTo(dataItem);
componentTreeView.select(dataItem);

 

I have tried every combination I can think of of using the nodeDataItem, the node, and hte dataItem (I think nodeDataItem and dataItem are the same thing, right?  But I got the code from several different examples and was just trying to be thorough). 

Also, I have a feeling I need to use expandPath(), but literally every example code I could find for expandPath just provides a hard-coded list of ids (like "[1, 4, 5]" which is completely useless to me.  How do I get the ids for each parent I need, in order to use expandPath?  Or is that even what I need to do? 

I also saw one example that did the following:

var item = $("#componentTreeView").find("li[data-id='" + id + "']").find(".k-in");

// expand all parent nodes
$(item).parentsUntil('.k-treeview').filter('.k-item').each(
    function (index, element) {
        $("#componentTreeView").data('kendoTreeView').expand($(this));
    }
);

 

But this did not work either. 

[Christopher]

After posting, I found this example:

http://docs.telerik.com/kendo-ui/controls/navigation/treeview/how-to/persist-expanded-state

which would be even nicer, since it restores all previously-expanded items.  However, this also does not work for me.  The differences I can see are that I am not doing a page reload (just dataSource.read() ), and I am getting my data from a remote service (instead of a js object).  I'm also using AngularJS and storing the "expanded" info in the $scope, but that shouldn't matter.  When debugging this approach, I see the "expanded" ids properly getting stored, and then in the "setExpanded()" function, they are getting found in the for loop, and it is setting the "expanded = true" on them.  However, my TreeView just doesn't do anything, even though I see my debugger hit it. 

I am using IE11 if that helps, and kendo version 2015.2.624.  I know this is an old version, but this project has been in dev for a long time, and if we switch it out, we will need a lot of regression testing.  But if upgrading is necessary to make this work, I suppose it would be worth it. 

[Peter Milchev]

Hello Christopher,

One option to achieve the desired result is to expand the nodes in the dataBound event handler as demonstrated in this Dojo example which you could use as a reference.

Please note that this is a custom solution and it is a task for the developer to implement, ensuring that it works correctly in all cases.

Regards,
Peter Milchev
Telerik by Progress

[Christopher]

Thanks for the reply. 

Unfortunately, the Dojo example you linked has the same problem my code does, which is that after you hit the "Reload Page" button, the TreeView comes back un-expanded and with no node selected.  This is using IE11.  I just tried it in Firefox and it does seem to properly expand.  Unfortunately, my client uses IE11 as its standard, so I have to make it work with that browser. 

[Peter Milchev]

Hello Christopher,

We have investigated the scenario and it seems the problem is with the Cookies and older versions of the Internet Explorer(we tested with 11.0.9600.18500). Here is the Dojo example modified to get and set the Cookies with plain javascript implemented as in the JavaScript Cookies article. In the latest version of Internet Explorer, which we initially used, this behavior is not observed. 

We have modified the Dojo example so that it saves the expanded elements in a global variable instead of cookies and it works properly on both older and newer versions of Internet Explorer.

Some options to solve the encountered problem are:

• Upgrade the client's browser;
• Choose a suitable replacement of the Cookies as a way to save the expanded items.

Regards, Peter Milchev
Telerik by Progress