How to uncheck kendo ui treeview checkboxes using javascript

1
votes

I am using a kendo ui treeview control on an asp.net mvc page. When a cancel button is clicked I want to uncheck all the checked boxes in the treeview. The following is my code.

function cancel() {
    var treeView = $("#treeview").data("kendoTreeView"),
                   myNodes = treeView.dataSource.view();
    for (var i = 0; i < myNodes.length; i++) {
        var children = myNodes[i].children.view();
        if (children) {
            for (var j = 0; j < children.length; j++) {
                if ((typeof children[j].checked !==   undefined) && (children[j].checked)) {
                    //children[j].prop('checked', false);
                    children[j].attr('checked', false);
                }
            }
        }
    }
}

Whether I use either children[j].prop('checked', false); or children[j].attr('checked', false); I am getting "object doesn't support property or method" error.

Thanks

2
asp.net-mvckendo-uitreeview

2 Answers

0
votes

treeView.dataSource.view() will return an array of data items. Those dataItems ain't DOM elements, but you can refer to a DOM element using the dataItem.uid property and the treeView findByUid function.

var node = treeview.findByUid(children[j].uid);

However, changing the DOM element of a kendo component is usually a bad idea as the dataSource and dataItems won't be aware of those change and they may eventually overwrite your changes. Before you do this, makes sure the check ain't binded to a dataItem property name.

Also note that some DOM nodes may not be loaded if the treeView loadOnDemand property is set to true.

0
votes

The Click event is set on the label of the tree view and not on the input element. That is the square thing which you see. So triggering a click event on all the label's of the input element which is checked will remove the check mark. Also its not just a DOM change, it triggers all kendo functionality that happens on unchecking the node, So this is perfectly valid.

Call this function to uncheck all the checked nodes.

      function unCheckAll(){      
         $('#treeview').find('input:checkbox:checked').each(function(){
            if($(this).closest('li').find('ul').length== 0){ // if its not a node with children
             $(this).closest('span').find('label').trigger('click');
           }         
         });            
       }

Here I created a Example Page for you, A Working Example