Kendo Grid MVC Time field filter with TimePicker control

[Amol]

I am displaying a Time field with datatype DateTime. I am displaying only time part at UI by using Data Format String  "{0:hh:mm:ss tt}")

(eg. field value:02:00:00 AM).

I want to apply filter on this field but by default filter option provides DatePicker control to select date but I want only TimePicker control to be display in filter?

I don't want display DatePicker control because its not display in grid row.

Please let me know if there are any demo for this scenario.

[Georgi]

Hello Amol

The following code snippet illustrates how to change the UI widget of the filter menu of the Kendo Grid:

.Columns(columns =>
{
    columns.Bound(x => x.Date).Filterable(x => x.UI(GridFilterUIRole.TimePicker));

})

The dojo below illustrates the result after changing filter menu UI to Kendo TimePicker:

• http://dojo.telerik.com/IRAfI

Regards,
Georgi
Progress Telerik

[AGGELIKI]

Hello Amol,

although this is more than a year old post, we are now facing the same problem with kendo UI 2018.2.516 and MVC version. In the dojo example you posted, the time element of the BirthDate is 00:00 and thus there is no way to check that when the Birthdate filtering is set to timepicker, the filtering by time is actually working.

In our example, we have set our model property type of DateTime (in the Datasource model), and the column is bound like this
.Filterable(flt => flt.UI(GridFilterUIRole.TimePicker)).Format("{0:HH:mm}").

(we also have a clientTemplate to show the date in the format we want, but i guess this souldn't raise a problem.)

Can you please post a working example with a timepicker filtering actually working?

Thank you,

Maria

[Georgi]

Hello Maria,

I am attaching a working MVC 5 sample where a time field is filtered via a Kendo TimePicker.

Have in mind that the time picker internally uses Date objects. In other words, to compare times only, the dates should be equal.


Regards,
Georgi
Progress Telerik

[AGGELIKI]

Hello Georgi,
The sample you posted about time filtering work's like a charm! Thank you!
Although we had the same implementation, a DateTime object with dates equal and only the time difference, I realized my fault was on the bounding of the Column in the grid. My model property is a nested object, where I bounded its DateTime property and in order to function it I used a clientTemplate parsing the date and then casting to string.

columns.Bound(e => e.EventScheduleSpecification.HourOfDayMinute)
.ClientTemplate("#= EventScheduleSpecification.HourOfDayMinute != '' ? kendo.toString(kendo.parseDate(EventScheduleSpecification.HourOfDayMinute), 'HH:mm') : '' #")
.Filterable(flt => flt.UI(GridFilterUIRole.TimePicker)).Format("{0:HH:mm}").Width(100);

The above code actually results to the following logic (correct me if I am wrong) : because of the nested object the clientTemplate is required in order to display the date of the property EventScheduleSpecification.HourOfDayMinute but that somehow transforms the property to type String (although it is a date), where filtering and sorting is applied to the string type.
However, when I decided to treat that property as a DateTime by adding the line below, the sorting worked properly 

model.Field("EventScheduleSpecification.HourOfDayMinute", typeof(DateTime));

However the above did not work for the filtering!

So finally, my question is, why do I have to change nested properties to flat ones to use the filtering/sorting functionality according to the property type? Why can't the grid just bind to the specific type of property of the nested object without requiring the clientTemplate? And maybe this should be specifically mentioned somewhere in the documentation...

Thank you!

Maria

[Georgi]

Hello Maria,

Generally speaking the DataSource supports flat data which is why some of the functionality such as sorting, filtering, etc. does not work with nested objects. Comparing two objects is a complex task which depends on the use case. You could compare them by a reference, by certain property, etc.

Furthermore, when the initialization script is generated, all fields of the model are iterated and a schema.model is created. However, in case the field is an complex object the type is set to `object` and its fields are not iterated. 

I am attaching a modified version of the sample where the date field is a property of a complex object.


Regards,
Georgi
Progress Telerik