Sorting is not working for dynamic child load

[Ashok kumar]

We are loading child data dynamically. so we pass the datasource as {result: []}. while doing this the sorting is not working. Plz help.

[Farveen Sulthana Thameeztheen Basha]

 

Hi Ashok, 

Thanks for contacting Syncfusion Support. 

Query#:- We are loading child data dynamically. so we pass the datasource as {result: []}. while doing this the sorting is not working. 

We have checked your query and while performing Sort operation we need to handle the Sorting on dataStateChange Event based on requestType while using Observables. Refer to the documentation Link:- 

https://ej2.syncfusion.com/angular/documentation/treegrid/observables/#handling-treegrid-actions 

We can get the Sorted details with dataStateChange event, based on that we need to handle the sorted query when requestType sorting and return the resultant data in terms of result and count.  

Refer to the code below:- 

App.Component.hmtl  

<ejs-treegrid #treegrid [dataSource] = 'data | async'[treeColumnIndex] = '1' parentIdMapping = 'ParentId' idMapping = 'TaskId' hasChildMapping = 'isParent'(dataStateChange) = 'dataStateChange($event)'[allowPaging] = "true"[allowSorting] = "true"[pageSettings] = "pageSettings" >  

            <e-columns>  

                <e-column field='TaskId' headerText='Task ID' width='90' textAlign='Right'></e-column>  

  

              .     .    .  

            </e-columns>  

</ejs-treegrid>`  

  

App.Component.ts  

  

protected getData(state: DataStateChangeEventArgs): Observable<DataStateChangeEventArgs> {  

        const pageQuery = `$skip=${state.skip}&$top=${state.take}`;  

        let sortQuery: string = '';  

  

        if ((state.sorted || []).length) {  

            sortQuery = `&$orderby=` + state.sorted.map((obj: Sorts) => {  

                return obj.direction === 'descending' ? `${obj.name} desc` : obj.name;  

            }).reverse().join(',');  

        }  

  

        return this.http   

           .get(`${this.BASE_URL}?${pageQuery}${sortQuery}&$inlinecount=allpages&$format=json`)   

           .pipe(map((response: any) => response.json()))  

           .pipe(map((response: any) => (<DataResult>{  

                result: response['d']['results'],  

                count: parseInt(response['d']['__count'], 10)  

        })))  

        .pipe((data: any) => data);  

    }  

Screenshot:-  

   

Based like above example, we suggest you to handle the sorted query in your service. After handling the Sorting functionality at dataStateChange event, still faced issue, share us the following details. 

1. Have you load the dataSource for both parent and child in dynamically.
2. Share your complete TreeGrid code (Actions you have performed in dataStateChange event).
3. Screenshot/Video Demo to replicate the issue.
4. Have you handled the Sort actions in dataStateChanged(If yes please share)
5. Have you faced the issue only on updating child data dynamically?

 

Regards, 

Farveen sulthana T 

[Ashok kumar]

Thanks for the respond.

In the same setup how will I make ejs-tree grid default sorting/filtering working instead of calling the service.

I tried the default sorting/filtering with this set up but not working. It keeps on loading.

[Padmavathy Kamalanathan]

Hi Ashok, 

 

Thanks for the update. 

 

Query: how will I make ejs-tree grid default sorting/filtering working instead of calling the service. I tried the default sorting/filtering with this set up but not working 

 

Since you are using Custom Data Binding, all the data operations (sorting/filtering etc) have to be handled by using service in `dataStateChange` event. So we suggest you to handle it in your service as mentioned by us in our previous update. 

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan 

[Ashok kumar]

Is there any methods available to trigger sorting/filtering tree grid in the code?

[Farveen Sulthana Thameeztheen Basha]

Hi Ashok, 

To perform Sorting and Filter dynamically we can use filterByColumn and sortByColumn methods.  Also while using this method, we need to handle these actions in your service with dataStateChange Event as we have mentioned earlier. 

Refer to the API Link:- 

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#filterbycolumn 

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#sortbycolumn 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Farveen sulthana T