We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

import React from 'react';
import { DataManagerWebApiAdaptor } 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={PageFilterSort ]} />
            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







































1 Reply 1 reply marked as answer

BS Balaji Sekar Syncfusion Team October 19, 2020 03:57 AM UTC

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 { ComponentOnInitViewChild } from '@angular/core'; 
import { DataManagerWebApiAdaptor, } from '@syncfusion/ej2-data'; 
import { GridComponent } from '@syncfusion/ej2-angular-grids'; 
 
const SERVICE_URIstring = '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 }); 
    } 
 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar 


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon