We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

search child node and select will make the parent selected and make all of its child nodes selected.

I hope you're doing well. I have a problem if you search the child nodes and you select the child. It will select the parent node also which makes all of its child nodes selected. for example :
dataSource : [
     {id:'123',name:'parent 1',hasChild:true},
     {id:'123-1',pid:'123',name:'child 1'},
     {id:'123-2', pid:'123',name:'daughter'}
when you search daughter, the tree will view :
    parent 1
if you select the daughter, the parent 1 checkbox will be checked. It should be minus and only select daughter, if you make parent 1 checkbox checked, it will select parent 1, child 1, and daughter.
could you please help me fix this problem? thank you.

Best regards,

3 Replies

KM Kanagambigai Murugan Syncfusion Team October 28, 2019 07:25 AM UTC

Hi Sebastian, 
Thanks for contacting Syncfusion. 
We have validated the reported scenario at our end. By default, the parent will be in the checked state while selecting its child nodes when filtering with a single child. So upon clearing the search results, based on the parent state(checked), its corresponding children also go to checked state. This is the default behavior of our TreeView. However, you can achieve your requirement by disabling the loadOnDemand property. While doing so, the parent will go to the intermediate state after clearing the selection. Please refer to the following code snippet. 
<ejs-treeview #treeviewObj id="default" [loadOnDemand]=false [showCheckBox]=true [fields]='field' (dataBound)="dataBounded($event)" (nodeChecked)="nodeCheck($event)">  
//Change the dataSource for TreeView  
  changeDataSource(data) {  
    for (let i = 0; i < data.length; i++) {  
      let dataId = data[i]["uuid"].toString();  
      if (  
        this.listTreeObj.checkedNodes.indexOf(dataId) !== -1 &&  
        this.checkNodes.indexOf(dataId) === -1 && !data[i].hasChild  
    this.listTreeObj.fields = {  
      dataSource: data,  
      id: "uuid",  
      text: "name",  
      parentID: "parent_id",  
      hasChildren: "hasChild"  
Could you please check the above sample and get back to us, if you require any further assistance on this?  
Kanagambigai M.  

SJ Sebastian Jonathan October 28, 2019 07:14 PM UTC

Hi Mr. Murugan,
Thank you for your response. It is true that I can filter a single child and selected it and when I clear the filter box, parent state will be unchecked. However, if you try to filter another child, the checked nodes will be unchecked or clear state. is this because loadOnDemand ? do you mean intermediate state is a clear state?

Thank you,


KR Keerthana Rajendran Syncfusion Team October 29, 2019 10:18 AM UTC

Hi Sebastian,  
Good day to you.  
Query: If you try to filter another child, the checked nodes will be unchecked or clear state. is this because loadOnDemand 
When loadOnDemand is set to true, the Treeview child nodes will not be rendered until the parent element was expanded. So, the checked nodes are not maintained. So, we suggested you to set loadOnDemand as false. 
And the checked child node details are updated each time in Treeview at the time of changing data Source by using checkedNodes through TextBox component change event. 
changeDataSource(data) { 
                   for (let i = 0; i < data.length; i++) { 
                       let dataId = data[i]["uuid"].toString(); 
                       if ( 
                           this.listTreeObj.checkedNodes.indexOf(dataId) !== -1 && 
                           this.checkNodes.indexOf(dataId) === -1 && !data[i].hasChild 
Query: Do you mean intermediate state is a clear state? 
No, intermediate state is not clear state. If any one of the children is not checked within a parent node , the corresponding parent node will be  moved to intermediate state which is represented by an icon (“-“). If all the children are checked within a parent, the corresponding parent node will be automatically changed to checked state. if none of the child is checked within a parent, the corresponding parent node automatically will be moved to unchecked state (clear state). You can check this behavior in the below demo link 
Please let us know if you need any further assistance. 

Live Chat Icon For mobile
Up arrow icon