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

[Sebastian Jonathan]

Hi,

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
            daughter
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,
Sebastian

[Kanagambigai Murugan]

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. 

  

default.html  

<ejs-treeview #treeviewObj id="default" [loadOnDemand]=false [showCheckBox]=true [fields]='field' (dataBound)="dataBounded($event)" (nodeChecked)="nodeCheck($event)">  

  

default.components.ts  

  

//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.checkNodes.push(dataId);  

    }  

    this.listTreeObj.fields = {  

      dataSource: data,  

      id: "uuid",  

      text: "name",  

      parentID: "parent_id",  

      hasChildren: "hasChild"  

    };  

  }  

  

Sample: https://stackblitz.com/edit/angular-tg9bew-4ntwj2?file=default.component.ts  

  

Could you please check the above sample and get back to us, if you require any further assistance on this?  

  

Regards,  

Kanagambigai M.  

[Sebastian Jonathan]

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,

Regards,

Sebastian

[Keerthana Rajendran]

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 

                       ) 

                           this.checkNodes.push(dataId); 

                   } 

               } 

 

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 

https://ej2.syncfusion.com/demos/#/material/treeview/check-box.html 

 

Please let us know if you need any further assistance. 

 

Regards, 

Keerthana.  

[Ignacy Mielniczek]

Hello Keerthana,

Is there a way to turn off the intermediate state for the parent node and make it selectable separately in ejs-treeview component (just like in ejs-dropdowntree component)?

Best regards,

Ignacy Mielniczek 

[SureshRajan Alagarsamy]

Hi Sebastian,

We have reviewed your query and understand that you would like to disable the intermediate state for checkboxes in the TreeView component. To achieve this, you can set the “autoCheck” property to false.

Refer to the below code snippet for further reference.

[app.component.ts]

 

<ejs-treeview

  id='treeelement'

  [fields]='field'

  [showCheckBox]='showCheckBox'

  [autoCheck]='false'

> 

</ejs-treeview>

 

We have also attached a sample for your reference.

Sample : https://stackblitz.com/edit/github-ofrugg-ujjxx4?file=src%2Fapp.component.ts

Regards,
Suresh.