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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Filtering child value in datasource with field children

Thread ID:

Created:

Updated:

Platform:

Replies:

148180 Oct 9,2019 10:08 AM UTC Oct 25,2019 01:36 PM UTC Angular - EJ 2 5
loading
Tags: Treeview
Sebastian Jonathan
Asked On October 9, 2019 10:08 AM UTC

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 [Syncfusion]
Replied On October 10, 2019 10:55 AM UTC

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? 
 
 
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
Replied On October 10, 2019 11:10 AM UTC

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 [Syncfusion]
Replied On October 11, 2019 09:57 AM UTC

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" 
        } 
    ]; 
 
 
Data binding documentation:  
 
 
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
Replied On October 24, 2019 11:05 AM UTC

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 [Syncfusion]
Replied On October 25, 2019 01:36 PM UTC

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" 
    }; 
  } 

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon