Initial Query in Grid

[Satheesh Kumar]

Hi

I am using a datagrid with remote datamanager. I want to send additional filter other than user filtering in every request. I tried setting initial query as in the link provided.

Pf7vr3 (forked) - StackBlitz

I am getting an error. Can you help me in achieving this ?

Thanks

[Nithya Sivaprakasam]

Hi Satheesh,

Greetings from Syncfusion support.

Currently we are validating your query and we will update within two business days(06.06.2022).Until then we appreciate your patience.

Regards,

Nithya S

[Nithya Sivaprakasam]

Hi Satheesh,

Still, we are validating your query with provided information and we will update further details on 07.06.2022. Until then we appreciate your patience.

Regards,

Nithya S

[Nithya Sivaprakasam]

Hi Satheesh,

Sorry for the inconvenience caused.

Based on your query, we suggest you use a Predicate option with generating multiple filtering queries. In this predicate, you should pass the required values like (‘field’, ‘filter operator’,’ value’) and you can filter with multiple columns by using (and & or) operators.

Please check the below code and sample for reference.

Index.js

 

import { render } from 'react-dom';

import './index.css';

import * as React from 'react';

import {

  GridComponent,

  ColumnsDirective,

  ColumnDirective,

  Page,

  Inject,

  Filter,

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

import {

  DataManager,

  WebApiAdaptor,

  ODataAdaptor,

  Query,

  Predicate,

} from '@syncfusion/ej2-data';

import { SampleBase } from './sample-base';

 

//Like this only you should build complex criteria for the filter using Predicate

 

var outVal = new Predicate('ShipCountry', 'equal', 'Germany');

outVal = outVal.and('CustomerID', 'equal', 'ALFKI');

 

export class RemoteDataBinding extends SampleBase {

  data = new DataManager({

    url: 'https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders',

   adaptor: new ODataAdaptor(),

  });

  gridInstance;

  objQuery = new Query().where(outVal);

  render() {

    return (

      <div className="control-pane">

        <div className="control-section">

          <GridComponent

            id="Grid"

            dataSource={this.data}

            ref={(grid) => (this.gridInstance = grid)}

            allowPaging={true}

            pageSettings={{ pageCount: 3 }}

            allowFiltering={true}

            query={this.objQuery}

         >

            <ColumnsDirective>

              <ColumnDirective>

              ……………………………….      

              </ColumnDirective>

            </ColumnsDirective>

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

          </GridComponent>

        </div>

        <div id="waitingpopup" className="waitingpopup">

          <span id="gif" className="image"></span>

        </div>

      </div>

    );

  }

}

 

render(<RemoteDataBinding />, document.getElementById('sample'));

Sample: https://stackblitz.com/edit/react-mpx65w-qbcyxv?file=index.js

Kindly check the below documentation for more information about the predicates for multiple filter.

Documentation Link: https://ej2.syncfusion.com/documentation/data/querying/#build-complex-filter-criteria-using-code-classlanguage-textpredicatecode

https://ej2.syncfusion.com/documentation/api/data/predicate/

https://ej2.syncfusion.com/documentation/data/querying/#filter-operators

Please get back to us if you need further assistance.

Regards,

Nithya Sivaprakasam.