Filter Date range Grid with ODataV4Adaptor

[My]

How I do an external filter grid with Daterangepicker? Here is my code:

           

      gridObj = document.getElementById('grdOrder')['ej2_instances'][0];

          

          gridObj.filterByColumn("RequestDateTime", "greaterthanorequal", startDate, "and",true);

          gridObj.filterByColumn("RequestDateTime", "lessthan", endDate, "and",true);

When click button filter it run 2 request with 2 $filter params:

             (RequestDateTime ge '2018-12-12T17:00:00Z')

and      (RequestDateTime lt '2018-12-20T17:00:00Z')

How can I run with 1 query and remote ' char in value? 

[Venkatesh Ayothi Raman]

Hi Customer, 

Thanks for the update. 

Yes, we can filter the Grid by using daterange picker component externally using filterSettings property. Please refer to the following code example like as follows, 

 function buttonClick(args){  

 

        var gridObj = (document.querySelector('#Grid')).ej2_instances[0];    

        var drpObj = document.getElementById('daterangepicker').ej2_instances[0]; 

        var dateValue1= drpObj.value[0]; 

        var dataValue2= drpObj.value[1]; //get date values from date range picker 

 

        gridObj.filterSettings.columns = [  

        { "value": dateValue1, "operator": "greaterthanorequal", "field": 'OrderDate', predicate: 'and'},  

        { "value": dataValue2, "operator": "lessthanorequal", "field": 'OrderDate', predicate: 'and'}]  

    }  

 

Please let us know if you have any further assistance on this. 

Regards, 

Venkatesh Ayothiraman. 

[My]

It's work, thanks a lot.

[Venkatesh Ayothi Raman]

Hi Customer, 

Thanks for the feedback. 

We are very happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman. 

[My]

Hi, 

I have a 'ejs-multiselect' filter with grid, with value is an array ['a','b','c'], how can i filter grid with field is in this array?

Another problem, i can not using predicate OR, $filter alway return AND.

     {"value": $("#sPID").val(), "operator": "contains", "field": 'PatientId', 'predicate': 'or' }

Thanks.

[Pavithra Subramaniyam]

Hi Customer, 

 

Greetings from Syncfusion. 

 

Query #1 &#2: I have a 'ejs-multiselect' filter with grid, with value is an array ['a','b','c'], how can i filter grid with field is in this array? Another problem, i can not using predicate OR, $filter alway return AND. 

 

We have validated your query and we have prepared a sample using multi select dropdown to filter data in the grid. In the below sample, we have used Predicate method of Query property to use ‘OR’ operator for the grid filtering. Please refer to the below sample for your reference, 

 

Code Example:  

 

[.cshtml] 

... 

<div> 

    <ejs-multiselect id="multiselect" placeholder="EmployeeID" mode="Default" select="select"> 

        <e-data-manager url="https://ej2services.syncfusion.com/production/web-services/api/Orders" crossdomain="true" adaptor="WebApiAdaptor"></e-data-manager> 

        <e-multiselect-fields text="EmployeeID" value="EmployeeID"></e-multiselect-fields> 

    </ejs-multiselect> 

 

    <ejs-grid id="Grid" allowSorting="true" allowFiltering="true" allowPaging="true" allowGrouping="true" toolbar="@(new List<string>(){"Add", "Edit", "Delete", "Update", "Cancel" })"> 

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 

        <e-data-manager url="https://ej2services.syncfusion.com/production/web-services/api/Orders" crossdomain="true" adaptor="WebApiAdaptor"></e-data-manager> 

        <e-grid-filterSettings type="Excel"></e-grid-filterSettings> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" width="120" headerText="Order ID"></e-grid-column> 

            <e-grid-column field="EmployeeID" width="120" headerText="Employee ID"></e-grid-column> 

            <e-grid-column field="ShipCity" headerText="ShipCity" width="120"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

    var orPredicate = null; 

    function select(args) { 

        if (orPredicate) { 

            orPredicate = orPredicate.or('EmployeeID', 'equal', args.itemData['EmployeeID']); 

 

        } 

        else { 

            orPredicate = new ej.data.Predicate('EmployeeID', 'equal', args.itemData['EmployeeID']); 

        } 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        grid.query = new ej.data.Query().where(orPredicate); 

        grid.refresh(); 

    } 

</script> 

... 

 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/multiselect-filter2087746737  

 

Documentation: https://ej2.syncfusion.com/documentation/api/grid/predicate/#predicate  

 

Please let me know if you have any concern. 

 

Regards, 

  

Pavithra S. 

[My]

Thank you, I query grid with 'and' and 'or' successful.

Sorry, I have a litte question:

  I set <e-data-manager> with OdataV4 in cshtml page, how can I set grid do not load data when page loaded?

[Pavithra Subramaniyam]

Hi Customer, 

 

Query : how can I set grid do not load data when page loaded? 

 

We have analyzed your query and by default if the data source is defined in the grid property, it will be loaded on page loading. So we suggest to provide the dataSource using an external button as shown in the below sample. Please refer to the below code example and sample for your reference, 

 

Code Example:  

 

[.cshtml] 

<ejs-grid id="Grid" allowSorting="true"  allowPaging="true"  

 toolbar="@(new List<string>(){"Add", "Edit", "Delete", "Update", "Cancel" })">  

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>  

         <e-grid-filterSettings type="Excel"></e-grid-filterSettings>  

        <e-grid-columns>  

            <e-grid-column field="OrderID" width="120" headerText="Order ID"></e-grid-column>  

             .   .   . 

        </e-grid-columns>  

    </ejs-grid>  

 

<button id="btn" onclick="btnClick()">Load data</button> 

<script> 

        // you can assign the dataSource in any other function as per your requirement after Grid is rendered 

    function btnClick(args) { 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        var data = new ej.data.DataManager({ 

            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/', 

            crossdomain: true, 

            adaptor: new ej.data.ODataV4Adaptor 

        }); 

        grid.dataSource = data; 

    } 

</script>...  

 

                                 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/datasource-externalbutton-585536620  

 

Please get back to us for further assistance. 

 

Regards, 

  

Pavithra S.