Checkboxes selection

6 posts, 0 answers
  1. Ben
    Ben avatar
    14 posts
    Member since:
    Jul 2015

    Posted 19 Aug 2015 Link to this post

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

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 21 Aug 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Ben
    Ben avatar
    14 posts
    Member since:
    Jul 2015

    Posted 21 Aug 2015 Link to this post

    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.

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 25 Aug 2015 Link to this post

    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!
     
  6. Ben
    Ben avatar
    14 posts
    Member since:
    Jul 2015

    Posted 25 Aug 2015 in reply to Petyo Link to this post

    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?

  7. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 27 Aug 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready