This is a migrated thread and some comments may be shown as answers.
Checkboxes selection
5 Answers 54 Views
This is a migrated thread and some comments may be shown as answers.
Ben
Top achievements
Rank 1
Ben asked on 19 Aug 2015, 02:01 PM

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

5 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 21 Aug 2015, 01:01 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ben
Top achievements
Rank 1
answered on 21 Aug 2015, 01:28 PM

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.

0
Petyo
Telerik team
answered on 25 Aug 2015, 07:56 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ben
Top achievements
Rank 1
answered on 25 Aug 2015, 03:49 PM

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?

0
Petyo
Telerik team
answered on 27 Aug 2015, 06:35 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Asked by
Ben
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Ben
Top achievements
Rank 1
Share this question
or