Hi,
I'm developing an app in which we need to display product categories. We are using the Kendo UI treeview with checkboxes for this. Mind you that we vould possibly have n+1 child lvl's.
The problem I'm facing is with the checkchildren set to true.
What I would like to have is when the user selects a child, the parent gets selected through all the levels up. However when the parent gets selected I don't want all childs selected.
For example, we have a category called Interior, with 2 subcategories: chairs and tables. When I select chairs, I would like to also have Interior selected. But when I start by selecting Interior, I don't want chairs and tables to be selected automatically.
Is there a way to achieve this??
I have allready had a go with jquery and got pretty close to what I want, but selecting/deselecting sometimes randomly does nothing and I constantly get this error "Cannot read property 'className' of undefined" on line 40 kendo.all.min.js
Please find my JS below.The datasource is simple JSON with a name and id for each category and then the child categories
$("#tvCatList").kendoTreeView({
checkboxes: {
checkChildren: false
},
dataSource: cats,
loadOnDemand:false,
dataTextField: "Name",
dataValueField: "Id",
check: function(e){
checkParentNodes(this,e.node);
var currcheckbox = $(e.node).find(":checkbox");
var currchecked = currcheckbox.prop("checked")
if(currchecked == false){
var childcheckbox = $(e.node).find(":checkbox");
childcheckbox.prop("checked", false);
}
}
})
function checkParentNodes(tree, node){
var parent = tree.parent(node);
var currcheckbox = $(node).find(":checkbox");
var currchecked = currcheckbox.prop("checked");
if(parent && currchecked == true){
var checkbox = $(parent).find(":checkbox").first();
checkbox.prop("checked", true);
checkParentNodes(tree,parent);
}
}