Sorting and Filter does not work in Grid View after setting data and count parameter.

[Thin Sapal Yu]

Hi,

As you kay know the Grid view component data should data and count value in order to trigger the datacourcechanged event as mentioned in following link.

https://www.syncfusion.com/forums/155420/datasourcechanged-event-not-fired-datagrid

after the modification as link, i noticed that the sorting and filter become not working as expectation.

May i know any solution for it?

Thanks

Thin

[Mohammed Ansar Sathik Ali]

Hi Thin,

Greetings from Syncfusion support.

Query: Sorting and Filter does not work in Grid View after setting data and count parameter.

The grid action in custom binding need to be perform manually using the service. We already discussed how to achieve the grid action using the ajax method and how to bind in the grid in the documentation.

export class OrderService {

public ajax: Ajax = new Ajax({

    mode: true,

    onFailure: (e: Error) => false,

    type: 'GET'

});

private BASE_URL: string = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';

 

public execute(state: DataStateChangeEventArgs): Promise<DataResult> {

    return this.getData(state);

}

 

private getData(state: DataStateChangeEventArgs): Promise<DataResult> {

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

    let sortQuery: string = '';

 

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

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

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

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

    }

 

    this.ajax.url = `${this.BASE_URL}?${pageQuery}${sortQuery}&$inlinecount=allpages&$format=json`;

 

    return this.ajax.send().then((response: any) => {

        const data: any = JSON.parse(response);

        return {

            count:  parseInt(getValue('d.__count', data), 10),

            result: getValue('d.results', data)

        };

    });

}

  };

 

[In Grid]

 

export default class App extends React.Component<{}, {}> {

public orderService: OrderService = new OrderService();

public grid: Grid | null;

public data: any;

public pageSettings: PageSettingsModel = { pageSize: 10 };

public renderComplete() {

    if(this.grid && (this.grid.dataSource instanceof Array

        && !(this.grid.dataSource as object[]).length)) {

        const state = { skip: 0, take: 10 };

        this.dataStateChange(state);

    }

}

public dataStateChange(state : DataStateChangeEventArgs) {

  this.orderService.execute(state).then(( gridData ) => {

      if(this.grid) {

        this.grid.dataSource = gridData

      }

    });

}

public render() {

  this.renderComplete = this.renderComplete.bind(this);

  this.dataStateChange = this.dataStateChange.bind(this);

  return (

    <div className='control-pane'>

      <div className='control-section'>

        <GridComponent dataSource={this.data} ref={g => this.grid = g} pageSettings={this.pageSettings}

          dataBound={this.renderComplete} dataStateChange={this.dataStateChange} allowPaging={true}

          allowGrouping={true} allowSorting={true}>

Documentation: https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#handling-grid-actions

Please get back to us if you need further assistance on this.

Regards,

Mohammed Ansar

[cuong]

I have the same issue.

sort , filter not working when I set

gridInstance.dataSource = { result: list.List, count: list.TotalCount };

Can you fix this problem.

[Pavithra Subramaniyam]

Hi cuong,

As in our previous update, for EJ2 Grid custom binding, we need to bind the “dataStateChange” event which will be triggered for each grid action like paging, sorting, filtering, etc. Inside this event handler, we need to call the service and handle the required action in the service based on the event argument. Please refer to the below code example and documentation link for more information.

 

export default class App extends React.Component<{}, {}> {

 

  public dataStateChange(state: DataStateChangeEventArgs) {

    this.orderService.execute(state).then((gridData) => {

      if (this.grid) {

        this.grid.dataSource = gridData

      }

    });

  }

  public render() {

    this.dataStateChange = this.dataStateChange.bind(this);

    return (

      <div className='control-pane'>

        <GridComponent dataSource={this.data} ref={g => this.grid = g} pageSettings={this.pageSettings}

          dataBound={this.renderComplete} dataStateChange={this.dataStateChange} allowPaging={true}>

          .   .   .

        </GridComponent>

      </div>)

  }

};

 

 

Also you need to handle the sorting in your service based on the “state” value as highlighted in our previous update.

https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#custom-binding

If you are still facing the issue, please share the below details which will be helpful for us to provide a better solution as early as possible.

1. Share your Grid code example
2. Share the service code example
3. Is there any script error?
4. Share the Syncfusion package version
5. Share an issue reproducible sample if possible

Regards,

Pavithra S