Datetime filter in kendo grid

Viewed 15488

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.

3 Answers

An enhancement to Balázs' answer, this assumes that you are using a simple date portion of DateTime and don't care about the time portion at all. It is also recursive to handle being filtered with other unrelated filters.

public static IList<IFilterDescriptor> NormalizeDateFilters(this IList<IFilterDescriptor> filters)
{
    for (var i = 0; i < filters.Count; i++)
    {
        if (filters[i] is CompositeFilterDescriptor compositeFilterDescriptor)
        {
            compositeFilterDescriptor.FilterDescriptors.NormalizeDateFilters();
        }
        else if (filters[i] is FilterDescriptor filterDescriptor &&
                 filterDescriptor.ConvertedValue is DateTime &&
                 filterDescriptor.Operator == FilterOperator.IsEqualTo)
        {
            var value = DateTime.Parse(filterDescriptor.Value.ToString());
            var start = value.Date;
            var end = start.AddDays(1);

            var newFilter = new CompositeFilterDescriptor
            {
                LogicalOperator = FilterCompositionLogicalOperator.And
            };

            newFilter.FilterDescriptors.Add(new FilterDescriptor
            {
                Member = filterDescriptor.Member,
                MemberType = filterDescriptor.MemberType,
                Operator = FilterOperator.IsGreaterThanOrEqualTo,
                Value = start
            });

            newFilter.FilterDescriptors.Add(new FilterDescriptor
            {
                Member = filterDescriptor.Member,
                MemberType = filterDescriptor.MemberType,
                Operator = FilterOperator.IsLessThan,
                Value = end
            });
            filters[i] = newFilter;
        }
    }
    return filters;
}
Related