I have a treeview which has multiple levels and so we load only root nodes when treeview is displayed and everytime a node is expanded we query database and load its children. When the treeview is loaded sometimes i have a child node id and when treeview laods if a node id is passed then we should select the node by default and expand all its parent nodes. So my problem is when mytreeview loads i have only root nodes loaded adn no children and so if i look for id i do not find the node to expand. So my question is how do we load on demand when a child node id is provided which could be from nth level from any parent node whcih are not yet loaded.
thanks
Anamika
13 Answers, 1 is accepted
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

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
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:
$("#treeview").data("kendoTreeView").expandPath([2, 5]);
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

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
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

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
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

- 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".
function
ExpandNodes(nodes) {
return
$.map(nodes,
function
(x) {
x.expanded = x.children.length > 0;
if
(x.expanded)
ExpandNodes(x.children);
return
x;
});
};
$(
"#search-btn"
).click(
function
(){
var
searchText = $(
"#SearchText"
).val();
var
treeview = $(
"#TreeView"
).data(
"kendoTreeView"
);
if
(searchText.trim() !=
""
)
{
url =
"Controller/SearchNodes?searchText="
+ searchText;
data.setDataSource(
new
kendo.data.HierarchicalDataSource({
transport: {
read: {
url: url,
dataType:
"json"
,
type:
"POST"
,
contentType:
"application/json; charset=utf-8"
},
parameterMap:
function
(options) {
return
JSON.stringify(options);
}
},
schema: {
parse:
function
(response) {
return
ExpandNode(response);
},
model: {
id:
"node_id"
,
children:
"children"
,
expanded:
true
}
}
}));
}
else
{
url =
"Controller/LoadNodes"
;
data.setDataSource(
new
kendo.data.HierarchicalDataSource({
transport: {
read: {
url: url,
dataType:
"json"
,
type:
"POST"
,
contentType:
"application/json; charset=utf-8"
},
parameterMap:
function
(options) {
return
JSON.stringify(options);
}
},
model: {
id:
"node_id"
,
}
}
}));
}
data.dataSource.read();
});

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>
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!
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.
function
onDataBound(e) {
var
root = e.node ? $(e.node) :
this
.element;
this
.expand(root.find(
".k-item"
));
}
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