How to customize query parameters while performing sorting and filtering in React Grid

[guyz]

My database is mongoDB, my current grid configuration is as below:

import React from 'react';

import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

import { 

    ColumnDirective,

    ColumnsDirective,

    GridComponent,

    Page,

    Inject,

    Filter,

    Sort

} from '@syncfusion/ej2-react-grids';

const data = new DataManager({

    adaptor: new WebApiAdaptor,

    url: '/api/listings'

});

const Grid = () => {

    return (

        <div style={{ margin: '2.5%', marginTop: '2.5%'}}>

            <GridComponent 

                dataSource={ data }

                allowPaging={ true }

                allowFiltering={ true }

                allowSorting={ true }

            >

                <Inject services={[ Page, Filter, Sort ]} />

            GridComponent>

        div>

    )

};

export default Grid;

The grid is showing my data, so now I want to be able to customize the query parameters so my database could sort, filter, etc, but it seems that the grid has some default query parameters, as logged in my console:

It has a default query parameters of  $inlinecount $skip and $top? I want to get rid of all the defaults so i'm left with only /api/listings

And then when I click on sort, I want to add my own query parameters...like /api/listings?sort=theColumnNameHere

[Balaji Sekar]

Hi Customer, 

 

Greetings from the Sycfusion support. 

 

Based on your query we can customize the query parameter while perform the Sorting and Filtering actions using processQuery method of customAdaptor feature. 

 

We have extend the WepApiAdaptor using customAdaptor option then we are able to customize the query parameter using the processQuery method of customAdaptor. 

 

Please refer the below code example for more information 

 

[index.js] 

import { Component, OnInit, ViewChild } from '@angular/core'; 

import { DataManager, WebApiAdaptor, } from '@syncfusion/ej2-data'; 

import { GridComponent } from '@syncfusion/ej2-angular-grids'; 

 

const SERVICE_URI: string = 'https://ej2services.syncfusion.com/production/web-services/'; 

class extendedApiAdaptor extends WebApiAdaptor { 

            // Request processing method 

              processQuery(dm, query, hierarchyFilters) { 

              var processedQuery = super.processQuery(dm, query, hierarchyFilters); 

              // Here you can customize the request as per your requirement and send it 

              var url = processedQuery.url.split("?")[0] + "?/test"; 

              return  { type: "POST", url: url }; 

 

            } 

   } 

 

export class RemoteDataBinding extends SampleBase { 

    constructor() { 

        super(...arguments); 

       

        this.hostUrl = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/'; 

        this.data = new DataManager({ url: this.hostUrl, adaptor: new CustomAdaptor }); 

    } 

 

 

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

 

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

 

Regards, 

Balaji Sekar