Parent Node not checked In the Treeview

[Jeevan]

Hi, 

I have a Treeview with a specific hierarchy. The parent and children nodes have checkboxes. 

The parent node should be completely checked if all the children nodes under them are checked and it should be partially checked if the children nodes are not completely checked. 

But in my case, the parent node which is having partially checked children nodes is not highlighted or partially checked when the treeview loads initially. Once the parent node has been read, the node is partially checked. I need the parent node to be partially checked if it has partially checked children nodes when the Treeview loads for the first time itself. 

I have attached the screenshot too.

Thanks in advance.

[Ivan Danchev]

Hello Jeevan,

The described functionality: a parent node being checked when all of its child nodes are checked and "partially" checked when some of its nodes are checked is available for the TreeView and can be enabled through the checkChildren configuration option, or after the TreeView is initialized for the MVC wrapper:

$(document).ready(function () {
    var treeview = $("#treeview").data("kendoTreeView");
    treeview.setOptions({
        checkboxes: {
            checkChildren: true
        }
    });
});

With this functionality enabled a parent node can be in one of three states: unchecked - in none of its child nodes are checked, checked - if all of its nodes are checked, indeterminate - if some of its child nodes are checked while others are not.
With regard to the parent not assuming the expected state on initial load, if the child items are not loaded initially the state of the parent will not reflect the child nodes' state. In other words the parent node cannot be in indeterminate state if it still does not have any child nodes loaded. This can be observed in loadOnDemand scenarios (this functionality is enabled by default)., thus a parent node will change its state to indeterminate only after its child nodes have been loaded and some of them are checked (not all).

Regards,
Ivan Danchev
Progress Telerik

[Jeevan]

Hi Danchev,

Thanks for your reply.

The states of the parent node are working fine. 

I applied Load on Demand property and the property reflected only to the parent node.I was able to expand the parent node(A) but was not able to expand the children node(A1). Data is not populated to the children nodes(A1) and their respective children(A2). 
Could you let me know what I am missing here

Treeview 
*A
    -A1
         -A2

         -A2
*B
    -B1
    -B1
*C

                @(Html.Kendo().TreeView()
                    .Name("treeview")
                    .Checkboxes(checkboxes => checkboxes
                        .Name("checkedFiles[]")
                     )
                     .LoadOnDemand(false)
                     .DataTextField("Name")
                    .DataImageUrlField("ImageUrl")
                   .................
                )
Thanks, in advance.

[Ivan Danchev]

Hi Jeevan,

From the posted TreeView declaration it is not clear how you load the data. If you are using remote binding you can review this demo, which shows the DataSource's configuration and the called Action (Employees) that returns the data.

Regards,
Ivan Danchev
Progress Telerik

[Jeevan]

Hi,
Yes, I am using remote binding and returning a Json list to the treeview.
 @(Html.Kendo().TreeView()
                  
                    .Name("treeview")
                    .Checkboxes(checkboxes => checkboxes
                        .Name("checkedFiles[]")
                        .CheckChildren(true)
                    )
                    .Events(events => events.DataBound("OnDataBound").Expand("OnExpand").Check("OnCheck"))
                    .DataTextField("Name")
                    .DataImageUrlField("ImageUrl")
                    .DataSource(dataSource => dataSource
                    .Model(model => model
                        .Id("ID")
                        .HasChildren("HasChildren")
                    )
                    .Read(read => read.Action("Json_list", "controller").Data("additionalData").Type(HttpVerbs.Post)
                   
                    )
                    )
                     .LoadOnDemand(false)
                )
    
I had set LoadOnDemand to false and it worked fine for the parent node. The parent node has partially checked child nodes and the node was also partially checked when the treeview loaded initially. The child nodes having their repective children did not load and there was no expand button too. Could you just let me know what i am missing here? 

[Ivan Danchev]

Hello Jeevan,

Does your action in the controller have an id parameter as shown in our Remote Binding demo's Source section? You can check the response from the server. With load on demand disabled there should be separate requests /responses for every TreeView level and the response should look like this:

[{"id":1,"Name":"Nancy Davolio","hasChildren":false},{"id":3,"Name":"Janet Leverling","hasChildren":false},{"id":4,"Name":"Margaret Peacock","hasChildren":false},{"id":5,"Name":"Steven Buchanan","hasChildren":true},{"id":8,"Name":"Laura Callahan","hasChildren":false}]

You could also check if removing the data source's Model configuration, fixes the issue:

.DataSource(dataSource => dataSource
    //.Model(model => model
    //    .Id("ID")
    //    .HasChildren("HasChildren")
    //)
    .Read(read => read

Regards,
Ivan Danchev
Progress Telerik

[Jeevan]

Hi Danchev,

The checked property worked fine, only on expanding and collapsing the nodes. On initial loading of the page either the nodes are checked with a tick mark(in the case where all the child nodes are selected) and not checked (in the case where the child nodes are either partially checked or not checked completely). A parent node having partially checked child nodes becomes partially checked only on expanding and collapsing the node.

I would like to know whether is it possible to expand and collapse all the nodes, including the sub-nodes through code before the treeview is loaded on to page or not. If its possible, could you let me know how it can be achieved.

 

Thanks in advance.

[Ivan Danchev]

Hello Jeevan,

Nodes cannot be expanded through the API prior to being loaded. However the expanded/collapsed state can be specified in the data (expanded: true or false respectively), for example: dojo. A node that has its expanded property set to true will be expanded when loaded.
Expanding the nodes with the API requires the nodes to be loaded, so the expand method can be called in the dataBound event handler:

.Events(events => events.DataBound("onDataBound"))

function onDataBound(e) {
    e.sender.expand(".k-item");
}

Regards,
Ivan Danchev
Progress Telerik