how to expand the parent nodes of a selected child node on kendo treeview - kendo-ui

Question

hi there kendo enthusiast.. i have a little problem on kendo treeview, i manage to expand the selected child node of a treeview if it is a parent, but i can expand it's grand parents, here is my little code:
data.forEach(function (entry) {
var treeView = $("#sysfunc_ktreeview").data('kendoTreeView');
var dataSource = treeView.dataSource;
var dataItem = dataSource.get(entry);
var node = treeView.findByUid(dataItem.uid);
var checkbox = $("input[type='checkbox']", node)[0];
checkbox.click();
});
in this case i am getting the array from a database. but here, i cant expand the parent nodes if there child nodes were checked but there id(the parent) where not in the array. any great help will be much appreciated. this little piece of code is from sir OnaBai.. thanks sir

Answer 1

If you want to click all ancestors of items which id are in data, add the following lines of code:
var ancestors = $(node).parents("li[role='treeitem']");
$(">div>span>input", ancestors).click();
This selects all ancestors of current node an for each of them clicks the input.
So your code should look like:
data.forEach(function (entry) {
var treeView = $("#treeview").data('kendoTreeView');
var dataSource = treeView.dataSource;
var dataItem = dataSource.get(entry);
var node = treeView.findByUid(dataItem.uid);
var checkbox = $("input[type='checkbox']", node)[0];
checkbox.click();
var ancestors = $(node).parents("li[role='treeitem']");
$(">div>span>input", ancestors).click();
});
You can see it running here: http://dojo.telerik.com/#OnaBai/IRom

Answer 2

The best solution I came up with was this:
Highlighted code:
dataBound: function(e){
// expands tree to the selected node
var root = e.node ? $(e.node) : this.element;
// expands only selected checkboxes and parents
this.expand(root.find(".k-item input[type=checkbox]:checked").parents());
},
Full code:
$(".locationTree").kendoTreeView({
loadOnDemand: false,
checkboxes: true,
select: function(e){
e.preventDefault();
},
dataSource: {
type: "json",
data: processTable(flatData, "id", "parent", 0)
},
dataBound: function(e){
// expands tree to the selected node
var root = e.node ? $(e.node) : this.element;
//this.expand(root.find(".k-item")); // expands all
// expands only selected checkboxes and parents
this.expand(root.find(".k-item input[type=checkbox]:checked").parents());
},
});

Answer 3

found a better approach sir #OnaBai
success: function (data) {
$.each(data, function (index, entry) {
var dataSource = treeView.dataSource;
var dataItem = dataSource.get(entry);
if (!dataItem.hasChildren)
{
dataItem.set("checked", true);
}
var node = treeView.findByUid(dataItem.uid);
parents.push(treeView.dataItem(treeView.parent(node)).id);
if (index + 1 == data.length) {
setTimeout(function () {
self.expandParents(parents, treeView);
}, 100);
}
});
setTimeout(function () {
self.filterChange(treeView, data);
}, 100);
}