Load and Expand all parent nodes when child node id is given with ondemand loading in treeview

Hi Anamika,

The TreeView hierarchical dataSource does not have information about the relationship between root nodes and not-loaded child nodes. As a result, a standalone child node ID cannot be of any use. You will have to find out all ancestor nodes' IDs and then use them to expand the TreeView to the desired child node:

http://docs.telerik.com/kendo-ui/api/web/treeview#methods-expandPath

Regards,
Dimo
Telerik

Hello,

I have loaded the root nodes. And when a a search criteria is given i find child node id and all parent node ids till root node. But till now the datasource_read method has only loaded root nodes. In jQuery i call
treeview.expandPath(['node1','node2']);
Till now only node1 is loaded so i do not see treeview doing a query back to Controller to load node2 and expand node1.

Will expandPath load childnode before expanding

Anamika

Hello Anamika,

Yes, each node is loaded and then it is expanded. You can see it in action here:

http://demos.telerik.com/kendo-ui/treeview/remote-data-binding

When the page loads, do not expand the TreeView manually. Instead, execute the following script in the browser's Javascript console:


You will see how the root node's children are loaded, then the root node is expanded, then the children of a child node are loaded, and the child node is expanded to show the grandchildren.

ID 2 is the ID of the Andrew Fuller item, while 5 is the ID of the Steven Buchanan item.

Regards,
Dimo
Telerik

Hello
As suggested by you i am changing remote_data_binding.cshtml in Kendo.Mvc.examples  Project and added a document ready function with the code you suggesed and now it Looks like this
@(Html.Kendo().TreeView()
.Name("treeview")
.HtmlAttributes(new {@class="demo-section" })
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Employees", "TreeView")
)
)
)
<script>
$(document).ready(function () {

treeview = $("#treeview").data("kendoTreeView");
treeview.expandPath([2, 5]);
});
</script>

But when i put breakopoint  in controller method
public JsonResult Employees(int? id)
{
it hits just once with id null and loads Andrew Fuller and does not load its child or expand it even. Do i need to add somethingelse?

Anamika

Hello Anamika,

The discussed demo and expandPath work as expected on my side. Please check the video below and compare with the code on your side. I have used the same demo, which is shipped together with the UI for ASP.NET MVC distribution with no modifications.

http://screencast.com/t/jhcZ1nuXO

Regards,
Dimo
Telerik

Hello Dimo,

Thanks. Problem on my side was i was calling expandPath in documentLoad and by then no root was loaded. if i call later once root node loaded expandPath works fine.

Another question in my Project the node id is string set to rowguid value. My Controller method sends the path to JQuery Ajax call and gets path and calls expandpath
treeView.expandPath(['root','43e5c36d-8803-4208-911a-a3950019b709','42d51977-f7bb-40a6-828c-268aeb926acc','cb8df4d6-47a5-45b2-88c0-495c496fb75b']);
Above  hardcoded path works but if my Controller method sends back comma separated string and i call expandpath using that it will not work. so how shall i return the comma separated string path from Controller method

Anamika

Hello Anamika,

The described issue does not seem related to Kendo UI, but to the existing custom implementation. Please debug and compare the arguments, which you are passing to the expandPath method in the two cases, in order to find out why it doesn't work in one of them.

For example, are you splitting the comma-separated response to several different strings, one for each GUID? Are you then passing them to the expandPath method as members of an array?

Regards,
Dimo
Telerik

I ran into a similar problem and managed to fix it by implementing two Controller methods

• Controller.LoadNodes(int? parentId)
• Controller.SearchNodes(string searchTerm)

 

LoadNodes would return a flat list of direct children. Whereas SearchNodes would return a nested list of matched search terms and their parents.

My example used a SQL Server backup and followed the Hierachyid Data Type tutorial.

Once you've got that setup in the search button click event swap out the datasource for your treeview. Notice you have to set the datasource using the setDataSource method based on this post in the titled "Error when attempting to change datasource on treeview".

Hi 

I'm trying to use expand all to my treeView. as result it openes just the first two nodes.

My treeview is flat, and has parent node null. 

Why does it happen?

do you have an example that works with parent node null, to send me?

 

Thanks, 

have a good day!

as to the question above, I have a different sample that doesn't open at all the treeview.

thanks,

(most from : http://docs.telerik.com/kendo-ui/web/treeview/binding-to-flat-data)

 <div id="tree"></div>

 

<script>

var flatData = [
  { id: 1, parent: null, text: "Item 1" },
  { id: 2, parent: null, text: "Item 2" },
  { id: 3, parent: null, text: "Item 3" },
  { id: 4, parent: null, text: "Item 4" },
  { id: 5, parent: 1, text: "Item 1.1" },
  { id: 6, parent: 1, text: "Item 1.2" },
  { id: 7, parent: 1, text: "Item 1.3" },
  { id: 8, parent: 3, text: "Item 3.1" },
  { id: 9, parent: 3, text: "Item 3.2" },
  { id: 10, parent: 5, text: "Item 1.1.1" },
  { id: 11, parent: 5, text: "Item 1.1.2" },
  { id: 12, parent: 5, text: "Item 1.1.3" },

{ id: 13, parent: 10, text: "Item 1.1.3" },

{ id: 14, parent:10, text: "Item 1.1.3" },

{ id: 15, parent:10, text: "Item 1.1.3" }
];

// tree for visualizing data
$("#tree").kendoTreeView({
  dataSource: {
    transport: {
      read: function(options) {
        var id = options.data.id || null;

        options.success($.grep(flatData, function(x) {
          return x.parent == id;
        }));
      }
    },
    schema: {
      model: {
        id: "id",
        hasChildren: function(x) {
          var id = x.id;

          for (var i = 0; i < flatData.length; i++) {
            if (flatData[i].parent == id) {
              return true;
            }
          }
          return false;
        }
      }
    }
  }
});
var treeview = $("#tree").data("kendoTreeView");
treeview.expand(".k-item");
</script>

Hello,

Only the root nodes will be expanded with the code that you provided because the only they will be loaded at the time the expand method is being called. You could load all nodes initially using the loadOnDemand option in order to expand all nodes(live-demo) with the provided code.

Regards,
Daniel
Telerik

Thanks for your answer.

when I write treeview.expand(".k-item") - is supposed to open all levels, but does not(opens one or two levels only).

(every time I write again treeview.expand(".k-item") - opens another level, but then other things don't work).

now when i added loadOnDemand - it opened another level. 

but it didn't open all levels.

we have kendo.mvc.dll of version - 2015.1.318.440.

Thanks in advance!

 

Hello again,

How are you binding the data? If the data is bound via Ajax then the approach will not work because the data will loaded asynchronously. In this case you could either add a field named expanded to the returned items with the value set to true or use the dataBound event e.g.

If you are not binding the data via Ajax then please provide the code that you are using so I can check the setup.

Regards,
Daniel
Telerik