kumawatp kumawatp - 16 days ago 14
C# Question

Datetime filter in kendo grid

My code is in C# .NET
I am using Kendo Grid version 2013.2.716.340 and server binding to show data in grid.

In Kendo UI Grid, I have a

dateTime
column but the column filter input only has a date picker but no time picker. Due to this if I select the option
IsEqualTo
and give a date then I get zero results as the time is set to
00:00:00
in the filter but the columns have some time value.
I want to add time picker along with date picker.

I tried to do this on my column, but it didn't work:

columns.Bound(o => o.Time).Title("Time").Format("{0:MM/dd/yyyy HH:mm:ss}").Filterable(f => f.UI("DateTimeFilter")).Width("5%");


And have applied below script :

<script type="text/javascript">
function DateTimeFilter(control)
{
$(control).kendoDateTimePicker();
}
</script>


The above code works when I select exact
datetime
from
datetimepicker
but it doesn't work when I select
isequalto
.
For eg : If I have this
datetime
"12/21/2013 07:15:45" displayed in my kendo grid column and when I copy this
datetime
to
isequalto
option under filter it does not gives any data.

Also I tried the example provided on this link It also didn't work in my case. Example on this link uses Ajax binding. I need to apply it in case of server binding.

This is an attached image that shows what I want to apply. Here is the link for image.
If I copy the
datetime
shown in grid to the filter It should filter correctly and give result.

I will be very thankful if anybody could help me out in solving my issue. Thanks in advance.

Answer

From my experience, the kendoDateTimePicker is really picky; if the format of the filter cannot specify the datetime precision of the column data, it will not find it.

In your case, your column format is "MM/dd/yyyy HH:mm:ss" (with seconds). The default format for the kendoDateTimePicker is "MM/dd/yyyy h:mm tt" (without seconds and hour spec is mismatched). Since you initialized a default kendoDateTimePicker, no matter what you put in the picker, you could never filter to a date that IS EQUAL TO a column value since you couldn't input how many seconds it was.

The easiest way to ensure it works is to use the same format for both column and the kendoDateTimePicker . Replace your DateTimeFilter function with this:

function DateTimeFilter(control) 
{
   $(control).kendoDateTimePicker({
      format: "MM/dd/yyyy HH:mm:ss",
      timeFormat: "HH:mm:ss"
   });
}

With regards to the kendoDateTimePicker:

  • format defines the input value format for control
  • timeFormat defines the time format of the time picker
  • interval (didn't use it above), but it specifies the time interval in minutes between each option of the time picker.

I am not using asp.net mvc, so I'm not 100% sure if this solves your problem. However I am certain it will clear up at least some of the filtering issues you have. I can provide a jsfiddle for a purely html/javascript sample if you want.