Overide default sorting component

[Dana Sarghe]

Hello,

I have a grid with a custom pager, and i fill in the data one page at a time. Based on the selected page i call an API and get the items for the particular page and set them in the [dataSource] property of the grid.

Is there a way i can keep the gird sorting component UI without the default sorting made by the component?

I want to send the selected sorting parameters to my API and do the sorting there and get back only the results for the page i have selected from the custom pager.

Thank you.

[Pavithra Subramaniyam]

Hi Dana, 

 

Thanks for contacting Syncfusion support. 

 

From your query we understood that you are setting a particular set of data to the Grid and while sorting action you need to call your API with the sorting details and reset the dataSource. If yes you can achieve your requirement by using the “actionBegin” event with “requestType” sorting. Inside the event handler you can get the current sorting columns and send them to your API for your data processing. Please refer to the below code example for more information. 

 

@Component({ 

  selector: 'app-root', 

  template: `<ejs-grid #grid [dataSource]="data" allowSorting="true" allowPaging="true" [pageSettings]="pageSettings" (actionBegin)="actionBegin($event)"> 

    .  .  . 

  </ejs-grid>`, 

}) 

export class AppComponent { 

  .  .  . 

  actionBegin(args) { 

    if (args.requestType == 'sorting') { 

      console.log(this.grid.sortSettings.columns); 

      // here you can call your API and set the this.grid.dataSource property 

    } 

  } 

} 

 

 

 

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

 

Regards, 

Pavithra S