Kendo Grid Column Filter with DatePicker

Question

I'm using Kendo with ASP.NET MVC. I have a Kendo Grid with several different columns. A few of these columns contain dates. All of these columns can be filtered on several different criteria (is equal to, is not equal to, is before, etc.). When the user chooses to filter any of these columns, in the filter criteria window, they should be able to use a Kendo DatePicker widget.

Here's the catch. All our Dates are represented as strings, not DateTimes. The reason for this is simple: when displaying DateTime objects, .NET and/or Kendo convert the DateTimes to the local time of the browser displaying them. We cannot allow this. We need the dates to be rendered precisely as we give them.

When a column represents a DateTime, the DatePicker is available by default. So the question is, how can I have the filter window display a DatePicker when the column displays strings?

I assume something special will have to be done in the razor. The razor fields are bound to properties in the model. The pertinent razor looks something like this:

@(Html.Kendo().Grid<JobsAcrossWorld>()
    .Name("JobsAcrossWorld")
    .Columns(c =>
    {
        c.Bound(m => m.ScheduleDate);   // this is a DateTime as a string
        c.Bound(m => m.GeoArea);
        c.Bound(m => m.Begin);          // this is a DateTime as a string
        c.Bound(m => m.End);            // this is a DateTime as a string
        c.Bound(m => m.Effort);
    })
    .Pageable(p => p.
        Enabled(true)
    ...many more options...

Sorry if this is a Kendo newbie question; I'm fairly new at the Kendo stuff.

Question: Is there a reason your dates are strings? If they were dates, the Kendo Grid would automatically wire this up for you. — Matt Millican
Mentioned in question, because .NET wants to convert all dates and times to (browser) local time or UTC time. We don't want either. — Frecklefoot

Jarosław Kończak Jarosław Kończak · Accepted Answer · 2017-05-26T18:01:35

If you want to compare dates, you need to have parse string to Date object in JavaScript anyway. Otherwise comparing operations will not work.

Local time is is not argument here, it's excuse that may can have a problem with timezones.

To show dates in UTC time, convert date to UTC kind in C#:

DateTime dt = DateTime.Now;            
DateTime ut = DateTime.SpecifyKind(dt, DateTimeKind.Utc);

Then set correct timezone in dataSource requestEnd event for all date fields:

field = field.replace(/\d+/, function (n) {
    var offsetMiliseconds = new Date(parseInt(n)).getTimezoneOffset() * 60000;
    return parseInt(n) + offsetMiliseconds;
});

Source: http://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/utc-time-on-both-server-and-client

Alternative

If you don't wanna use this solution you have two more options but there are more difficult:

Filter is working on property assigned to column, but you can assign one property and display other using .Template("#= FieldName#"). So you can display your string and have second property with date assigned to column, but you need to have correct date in you property again or filter will work wrong.
You can write your own filter that will work on strings (probably with parsing them on date again) like on this example: http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

Kendo Grid Column Filter with DatePicker

1 Answers