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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Filter Date range Grid with ODataV4Adaptor

Thread ID:

Created:

Updated:

Platform:

Replies:

141603 Dec 20,2018 06:53 AM UTC Dec 31,2018 12:06 PM UTC ASP.NET Core - EJ 2 7
loading
Tags: DataGrid
My
Asked On December 20, 2018 06:53 AM UTC

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 [Syncfusion]
Replied On December 20, 2018 12:28 PM UTC

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
Replied On December 20, 2018 01:08 PM UTC

It's work, thanks a lot.


Venkatesh Ayothi Raman [Syncfusion]
Replied On December 21, 2018 03:38 AM UTC

Hi Customer, 

Thanks for the feedback. 
We are very happy to hear that your requirement is achieved. 

Regards, 
Venkatesh Ayothiraman. 


My
Replied On December 21, 2018 11:15 AM UTC

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 [Syncfusion]
Replied On December 24, 2018 08:51 AM UTC

 
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> 
... 
 
 
 
 
Please let me know if you have any concern. 
 
Regards, 
  
Pavithra S. 


My
Replied On December 30, 2018 07:17 AM UTC

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 [Syncfusion]
Replied On December 31, 2018 12:06 PM UTC

 
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>...  
 
                                 
 
Please get back to us for further assistance. 
 
Regards, 
  
Pavithra S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;