This is a migrated thread and some comments may be shown as answers.

Kendo Grid MVC Time field filter with TimePicker control

5 Answers 911 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Amol
Top achievements
Rank 1
Amol asked on 19 Jun 2017, 04:36 PM

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.

5 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 20 Jun 2017, 10:56 AM
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:



Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
AGGELIKI
Top achievements
Rank 1
Iron
answered on 24 Sep 2018, 02:02 PM

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

0
Georgi
Telerik team
answered on 26 Sep 2018, 06:39 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
AGGELIKI
Top achievements
Rank 1
Iron
answered on 26 Sep 2018, 12:38 PM
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

0
Georgi
Telerik team
answered on 28 Sep 2018, 10:05 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Amol
Top achievements
Rank 1
Answers by
Georgi
Telerik team
AGGELIKI
Top achievements
Rank 1
Iron
Share this question
or