filter by date grid ej2

[STANCIU BIANCA]

Hello,

Could you help with the following issue?

I am trying to filter by date a grid ej2 (I want the date to be in a specific format ( Format("yMd") ), but it does not work as expected. The values sent to controller does not help me do the filtering. 

I have noticed that neither does it work on the website https://ej2.syncfusion.com/documentation/grid/filtering/.

Is there a way to fix this issue in a clean way? I don't want to use the menu filter setting.

Thank you so much,

Bianca

[Sujith Kumar Rajkumar]

Hi Bianca, 

 

Greetings from Syncfusion support. 

 

Based on the query we would like to let you know that the Grid’s filtering functionality works on basis of comparing the filtered value with the corresponding column field data in the underlying data source bound to the grid. So when remote data is bound to the Grid and filter action is performed on a date time column, the filter value will be converted to a date time object and the server request will contain its corresponding date time string and not the custom format set in the column to be displayed in the Grid. This is the default behavior of Grid’s filtering functionality. So for your case, you can convert this date time string value to date time object format in your server side, perform filtering action and then return back the result to the Grid. 

 

Also in the documentation link that you mentioned, local data is bound to the Grid and the filtering action was properly performed when providing the date value(which will automatically be converted in to a Date object value and compared with the underlying data source to return the result) as can be seen in the below image, 

 

 

 

We suspect that the problem might be occurring due to cached memory in the browser causing some package conflicts in the documentation site. So we suggest you to clear the browser cache and then check the sample if the problem is resolved. Also try opening it in other browsers. 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[STANCIU BIANCA]

Hello,

I tried the filtering from the documentation site after I deleted the browser cache (and I tried in incognito mode as well), but the problem is still there. I attached a video with the actions I do. Is there something that I am missing?

Thank you,

Bianca Stanciu

Attachment: FilterByDateGridEj2_584c37a8.zip

[Sujith Kumar Rajkumar]

Hi Bianca, 

 

We checked the problem reported in the attached video demo and would like to let you know that the problem is occurring due to the date time column values getting converted to local time-zone in the documentation from your side and hence the date filter not properly performed since the displayed and underlying data value are different. We have explained this case in detail below for your reference, 

 

The Grid component will automatically convert UTC to local time and display it in the Grid which is the default behavior. So in the mentioned documentation link the first ‘OrderDate’ column value that is present in the Grid’s dataSource is “4^th July 1996” and you can check it in the below screenshot image for reference, 

 

 

 

Now when it is displayed in the Grid it will automatically be converted to local time based on the time-zone and displayed which is why the first date column value is displayed as “3^rd July 1996” in your system(due to the time-zone reduction in the value). So when you try to filter “7/3/1996” no result will be displayed but the result will be returned when inputting the filter value as – “7/4/1996”. This is the default behavior of this case and the filter needs to be performed based on the underlying data value. 

 

However you can prevent the time-zone reduction and display the UTC time itself in the Grid by setting the DataUtil’s serverTimezoneOffset property of the EJ2 Data as ‘0’. 

 

This is demonstrated in the below code snippet, 

 

<script> 

  ej.data.DataUtil.serverTimezoneOffset = 0; 

</script> 

 

So using this property you can set the time offset value as your local time-zone offset value to display the datetime values without converting it to local time-zone. 

 

Note: This approach will only work when remote data is bound to the Grid. For displaying the date value in UTC format itself when local data in bound to the Grid, the stringified data needs to first parsed using DataUtil’s parseJson method of the EJ2 Data before assigning as the Grid data source. This is demonstrated in the below code snippet, 

 

var data = @Html.Raw(Json.Serialize(ViewBag.datasource)); 

 

// Grid’s created event handler 

function onCreated() { 

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

     ej.data.DataUtil.serverTimezoneOffset = 0; 

     gridObj.dataSource = new ej.data.DataUtil.parse.parseJson(JSON.stringify(data)); 

} 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R