Fast and Easy Checkboxes

5 posts, 0 answers
  1. J
    J avatar
    7 posts
    Member since:
    Dec 2004

    Posted 27 Mar 2012 Link to this post

    Thanks for the addition of the CheckBoxes.  Here is an easy method to access the value using templates
    This is a change to the example code.

    1. change the template as follows...
    <script id="treeview-checkbox-template" type="text/kendo-ui-template">
    <input type="checkbox" name="checkedFiles[#= item.id #]" value="#= item.id #" />
    </script>

    2. You can access the value as follows...
       function showSerializedData() {
     var chkBox = $("#treeview input")
     var serializedData = chkBox.serialize()
                       .replace(/%5B/g, "[")
                       .replace(/%5D/g, "]")
                       .replace(/&/g, "&");
                     
     //get the value...
     var value = chkBox.val();
     //do something with it
                     
    $("#checked-nodes").html(serializedData);
     }
       
    In addition, you an auto check the box on node click as follows
    function onSelect(e) {
         var checkboxes = $(e.node).find(":checkbox");
         if(checkboxes.length > 0)
              $(checkboxes[0]).prop('checked','checked')
                         
        //HINT: you can get the node text this way as well
        var nodeText =  e.node.outerText;
    }


    Enjoy.

  2.
  3. J
    J avatar
    7 posts
    Member since:
    Dec 2004

    Posted 27 Mar 2012 Link to this post

    One additional tweak to get the parent to (un)select the children.  Please post an easier method if possible.

    function showSerializedData() {
        var chkBox = $(this)
        var serializedData = chkBox.serialize()
                .replace(/%5B/g, "[")
                .replace(/%5D/g, "]")
                .replace(/&/g, "&");
         
        //get the parent - typically a span
        var parent = chkBox.parent();
         
        //check to be sure - we do not want to do closest as it will traverse to many items
        if(parent != null && chkBox.parent()[0].nodeName != 'DIV')
        {
            //get the next item up - div.k-item, tells me this is a top node
            parent = $(chkBox.parent()[0]).parent();
            if(parent != null && parent[0].nodeName == 'DIV')
            {  
                //get the children of the closest k-item (li)  checkboxes
                //select all
                var pBoxes = $(parent).closest('.k-item').find(":checkbox");
                if(pBoxes.length > 0)
                    $(pBoxes).prop('checked',this.checked ? "checked" : "")
            }
        }
        //check all child items for the current item           
        var checkBoxes = chkBox.parent().find(":checkbox");
        if(checkBoxes.length > 0)
            $(checkBoxes).prop('checked',this.checked ? "checked" : "")
         
        //gt the value...
        var value = chkBox.val();
        //do something with it
         
        $("#checked-nodes").html(serializedData);
    }

    enjoy!!!
  5. Krish
    Krish avatar
    5 posts
    Member since:
    Jun 2012

    Posted 27 Jun 2012 Link to this post


    Hi,

    Thanks for your example. Really good. According to your example, it should select entire tree nodes. But for me is little different. here scenario.

    I have multiple parents and childs in tree view control.While selecting/deselecting parent node, it should select/deselet only child of that parent nodes. Is there any way to do this ?

    Thank in Advance
  7. J
    J avatar
    7 posts
    Member since:
    Dec 2004

    Posted 27 Jun 2012 Link to this post

    Greetings,
    If i understood you correctly, the attached html sample should get the job done.
    Save the file to the Kendo samples folder and run it locally...

    (base path)\examples\web\treeview\checkboxsample.html

    Also, please attach a sample data file and I will test the tree with it.
  8.
  9. Bruno
    Bruno avatar
    4 posts
    Member since:
    Sep 2012

    Posted 17 Sep 2012 Link to this post

    How can I do this with MVC?
Back to Top