Filtering, sorting and pagination from the server

Hi, I'm trying to create and adaptor to intercept the request from the my grid to the server so everytime I send a new sorting, filtering or pagination event, it sent a request in a certain way (a GET post with URL parameters with all the necessary information) to bring the filtered data from the server to the grid.

Thanks for your response Thavasianand, do you think you can provide an example using angular? 

...  class SerialNoAdaptor extends ODataAdaptor {      processResponse() {          let i = 0;          //calling base class processResponse function          let original = super.processResponse.apply(this, arguments);          //Adding serial number          original.result.forEach((item) => item['Sno'] = ++i);          return { result: original.result, count: original.count };      }  }    @Component({      selector: 'app-container',      template: `<ejs-grid [dataSource]='data'>                  <e-columns>                      <e-column field='Sno' headerText='SNO' textAlign='Right' width=150></e-column>                      ...                  </e-columns>                  </ejs-grid>`  })  export class AppComponent implements OnInit {        public data: DataManager;        ngOnInit(): void {          this.data = new DataManager({              url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders?$top=7',              adaptor: new SerialNoAdaptor          });      }  }

Hi Thavasianand, 

class SerialNoAdaptor extends ODataAdaptor {        processQuery(dm: DataManager, query: Query, hierarchyFilters?: Object[]) {           let queries: Requests = this.getQueryRequest(query);           let singles: QueryList = Query.filterQueryLists(query.queries, ['onSelect', 'onPage', 'onSkip', 'onTake', 'onRange']);           let params: ParamOption[] = query.params;           let url: string = dm.dataSource.url;           let temp: QueryOptions;           let skip: number;           let take: number = null;           let options: RemoteOptions = this.options;           let request: Requests = { sorts: [], groups: [], filters: [], searches: [], aggregates: [] };           // calc Paging & Range           if ('onPage' in singles) {               temp = singles.onPage;               skip = DataUtil.getValue(temp.pageIndex, query);               take = DataUtil.getValue(temp.pageSize, query);               skip = (skip - 1) * take;           } else if ('onRange' in singles) {               temp = singles.onRange;               skip = temp.start;               take = temp.end - temp.start;           }           // Sorting           for (let i: number = 0; i < queries.sorts.length; i++) {               temp = DataUtil.getValue(queries.sorts[i].e.fieldName, query) as QueryOptions;               request.sorts.push(DataUtil.callAdaptorFunction(this, 'onEachSort', { name: temp, direction: queries.sorts[i].e.direction }, query));           }           // hierarchy          if (hierarchyFilters) {              temp = (<Object>this.getFiltersFrom(hierarchyFilters, query));              if (temp) {                  request.filters.push(DataUtil.callAdaptorFunction(this, 'onEachWhere', (<Predicate>temp).toJson(), query));              }           }           // Filters           for (let i: number = 0; i < queries.filters.length; i++) {              request.filters.push(DataUtil.callAdaptorFunction(this, 'onEachWhere', (<Predicate>queries.filters[i].e).toJson(), query));              let keys: string[] = typeof request.filters[i] === 'object' ? Object.keys(request.filters[i]) : [];              for (let prop of keys) {                  if (DataUtil.isNull((request)[prop])) {                       delete request[prop];                  }              }           }           // Searches           for (let i: number = 0; i < queries.searches.length; i++) {              temp = queries.searches[i].e;              request.searches.push(DataUtil.callAdaptorFunction(this, 'onEachSearch', {                   fields: temp.fieldNames,                   operator: temp.operator,                   key: temp.searchKey,                   ignoreCase: temp.ignoreCase              }, query));           }           // Grouping          for (let i: number = 0; i < queries.groups.length; i++) {              request.groups.push(DataUtil.getValue(queries.groups[i].e.fieldName, query) as QueryOptions);           }          // Aggregates          for (let i: number = 0; i < queries.aggregates.length; i++) {              temp = queries.aggregates[i].e;              request.aggregates.push({type: temp.type, field: DataUtil.getValue(temp.field, query) });          }         let req: {[key: string]: Object } = {};          (this as any).getRequestQuery(options, query, singles, request, req);          // Params          DataUtil.callAdaptorFunction(this, 'addParams', {dm: dm, query: query, params: params, reqParams: req });          // cleanup          let keys: string[] = Object.keys(req);          for (let prop of keys) {              if (DataUtil.isNull(req[prop]) || req[prop] === '' || (<Object[]>req[prop]).length === 0) {                  delete req[prop];              }          }          if (!(options.skip in req && options.take in req) && take !== null) {              req[options.skip] = DataUtil.callAdaptorFunction(this, 'onSkip', skip, query);              req[options.take] = DataUtil.callAdaptorFunction(this, 'onTake', take, query);          }          let p: PvtOptions = this.pvt;          this.pvt = {};          if (this.options.requestType === 'json') {              return {                  data: JSON.stringify(req),                  url: url,                  pvtData: p,                  type: 'POST',                  contentType: 'application/json; charset=utf-8'              };          }          temp = this.convertToQueryString(req, query, dm) as QueryOptions;          temp = (dm.dataSource.url.indexOf('?') !== -1 ? '&' : '/') + temp as QueryOptions;          // Here you can modify the request url as per your requirement          return {              type: 'GET', url: (<string>temp).length ? url.replace(/\/*$/,<string>temp) : url, pvtData: p          };       }  }

It works like a charm! Thanks!