Datetime filter in kendo grid

Question

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 1

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.