Fast and Easy Checkboxes

[J]

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.

[J]

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!!!

[Krish]

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

[J]

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.

[Bruno]

How can I do this with MVC?