Filtering child value in datasource with field children

[Sebastian Jonathan]

Hi, I have problem to get the filtered value if I input text value of child object name.

I have used your code in https://stackblitz.com/edit/angular-tg9bew-9at2bu?file=default.html and I still can't resolve the issue.

I can only search the parent value only. 

Example of  my dataSource: 

dataSource = [

        {

            uuid: '1',

            parent_id: '',

            name: 'Lampung',

            children: [

                {

                    uuid: '1_1',

                    parent_id: '1',

                    name: 'Lampung Utara',

                },

                {

                    uuid: '1_2',

                    parent_id: '1',

                    name: 'Lampung Selatan',

                },

            ]

        },

        {

            uuid: '2',

            parent_id: '',

            name: 'Jakarta',

            children: [

                {

                    uuid: '2_1',

                    parent_id: '2',

                    name: 'Jakarta Selatan',

                    children: [

                        {

                            uuid: '2_1_1',

                            parent_id: '2_1',

                            name: 'Kemang'

                        }

                    ]

                },

                {

                    uuid: '2_2',

                    parent_id: '2',

                    name: 'Jakarta Utara',

                },

            ]

        }

    ];

I can't search value utara.

[Ashokkumar Balasubramanian]

Hi Sebastian Jonathan, 

 

Good day to you. 

 

We have validated the provided data source and query at our end. Currently, we have filtering support only for the flat data source. Since the filtering of the hierarchical data source will be more complex, can you please check and provide a flat data instead of hierarchical data if possible? 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/treeview/how-to/filtering-tree-nodes/ 

 

If your requirement does not satisfy, please let us know the following details 

 

a.     Whether you want to filter and showcase the searched text alone or if you want to showcase with its corresponding parent data as in the above example 

 

Kindly get back to us with the above-asked details if your requirement is not satisfied with the flat data source. It would be more helpful to assist you further. 

 

Regards, 

Ashokkumar B. 

[Sebastian Jonathan]

Hi Ashokkumar Balasubramanian,

I hope you're doing well. thank you for your response. It is indeed that I want to filter a text from hierarchical data source like what I have provided in earlier message an example of hierarchical data source.

what I want to accomplish that I can display a parent node and the child node which is filtered by the inputted text.
is it possible to do that? or that I need to transform the datasource into flat datasource like your example in the documentation?

Best Regards,
Sebastian.

[Ashokkumar Balasubramanian]

Hi Sebastian Jonathan,  

 

Yes. For using filtering support in Tree View component, you need to convert your hierarchical data into flat data source. Please find the below modified data source and sample. 

 

public localData: Object[] = [ 

        { 

            uuid: "1", 

            name: "Lampung", 

            hasChild: true 

        }, 

        { 

            uuid: "1_1", 

            parent_id: "1", 

            name: "Lampung Utara" 

        }, 

        { 

            uuid: "1_2", 

            parent_id: "1", 

            name: "Lampung Selatan" 

        }, 

        { 

            uuid: "2", 

            name: "Jakarta", 

            hasChild: true 

        }, 

        { 

            uuid: "2_1", 

            parent_id: "2", 

            name: "Jakarta Selatan", 

            hasChild: true 

        }, 

        { 

            uuid: "2_1_1", 

            parent_id: "2_1", 

            name: "Kemang" 

        }, 

        { 

            uuid: "2_2", 

            parent_id: "2", 

            name: "Jakarta Utara" 

        } 

    ]; 

 

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

 

Data binding documentation:  

 

https://ej2.syncfusion.com/angular/documentation/treeview/data-binding/?no-cache=1 

 

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

 

Regards, 

Ashokkumar B. 

[Sebastian Jonathan]

Hi Mr. Balasubramanian,

I hope you're doing well. I'm sorry for the late response. I want to inform you that I've figured out the problem and as you said before, it is true that I need flat data source instead hierarchical data source. however, I still 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

[Balachandar Murugesan]

Hi Sebastian,
                This is default behavior of TreeView, if the parent has only one child, Parent node get checked while selecting the child node. However we can unselect the other child nodes and move the parent node to intermediate state when clearing the search query. Please set the loadOnDemand as false.  Please find the modified code below. 

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 below sample and get back to us, if you require any further assistance on this? 

Regards, 

Balachandar M.