Issue with setting checked state on tree view nodes

2 posts, 0 answers
  1. Huw Lloyd
    Huw Lloyd avatar
    20 posts
    Member since:
    Jul 2009

    Posted 07 Jan 2014 Link to this post

    Hi,

    I have a treeview bound to a hierarchical data source and it all loads fine

    var treeview = $("#tree").kendoTreeView({
             dataSource: treeData,
             dataTextField: "Name",
             checkboxes: {
                 template: "<input type='checkbox' name='checkedFiles[#= item.id #]' value='#= item.id #' #if(item.IsChecked){# checked #}#/>"
                  
             },
             // listen for item selection
             select: function (e) {
     
                 // don't let the item be selected
                 e.preventDefault();
                 $(':checkbox:first', $(e.node)).click();
     
             }
         }).data("kendoTreeView");
    The issue is that I am using a template to set the checked flag on the check box if the datasource says the item is checked. The generated HTML shows the checked flag in the correct place for the relevant items, however the checkbox is either not checked, or  parent items are checked when I don't want them to be

    I think the issue is that on the data source, I am using the requestEndHandler to expand all nodes as per the documentation: 

    function requestEndHandler() {
        setTimeout("expandNodes()");
    };
      
    function expandNodes() {
        $("#tree").data("kendoTreeView").expand(".k-item");
    };
    How can I prevent the expanding of the nodes from messing up my check box state setting?

    Many thanks



  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 08 Jan 2014 Link to this post

    Hello Huw,

    I was not able to reproduce the state when an checkbox that should be checked is not. Please check my example:

    http://jsbin.com/imeZoDE/2/edit

    As for your other question - "parent items are checked when I don't want them to be", this happens by default. If all child items are checked then the parent is also checked, if some of the items are checked the parent is put in intermediate state. This was made in order to show the users the exact path to the checked item. There is not an out-of-the-box option that will prevent this functionality.

    As for expanding all nodes - use the dataBound event of the treeview, so you will make sure that the widget data is loaded:

    http://docs.kendoui.com/api/web/treeview#events-dataBound

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top