Checkboxes selection

[Ben]

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);
            }
        }

[Petyo]

Hello Ben,

 

your approach seems correct, but you need an out of bounds check as you move up the parent(). Something like this should do the trick. 

 

Regards,
Petyo
Telerik

 

 

[Ben]

Hi,

That seems to do the trick indeed. Thank you!

However, could you guide me on the way to make one more modification? We we would like to deselect all childs if we deselect a parent. But still NOT select all childs when the parent gets selected.

[Petyo]

Hello Ben,

you may use this approach to grab all child checkboxes. Notice, that you may have to tweak the logic additionally to achieve a consistent behavior.

Regards,
Petyo
Telerik

 

 

[Ben]

Hi, that seems like something that I allready found before.
The problem seems to be that not every click is processed. I have added a simple console output whenever I click on one of the checkboxes, but not every appears to trigger. Could this be a bug in the control?

[Petyo]

Hello Ben,

 

a bug may be present but unlikely; so far we are not aware of such misbehavior. the checkboxes feature is a popular one. Please isolate the problem further in the Dojo and we will look into it. Thank you in advance. 

 

Regards,
Petyo
Telerik