This is a migrated thread and some comments may be shown as answers.

Fast and Easy Checkboxes

4 Answers 464 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
J
Top achievements
Rank 1
J asked on 28 Mar 2012, 02:36 AM
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.

4 Answers, 1 is accepted

Sort by
0
J
Top achievements
Rank 1
answered on 28 Mar 2012, 03:34 AM
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!!!
0
Krish
Top achievements
Rank 1
answered on 27 Jun 2012, 07:23 PM

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
0
J
Top achievements
Rank 1
answered on 28 Jun 2012, 02:17 AM
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.
0
Bruno
Top achievements
Rank 1
answered on 17 Sep 2012, 07:30 PM
How can I do this with MVC?
Tags
TreeView
Asked by
J
Top achievements
Rank 1
Answers by
J
Top achievements
Rank 1
Krish
Top achievements
Rank 1
Bruno
Top achievements
Rank 1
Share this question
or