Kendo Grid Date Filter - kendo-grid

Question

I'm trying to use the kendo grid date filter as seen here: http://demos.kendoui.com/web/grid/filter-menu-customization.html
I'm not seeing any good examples on how to do this using Razor syntax.
The only example they show is using javascript:
{
field: "BirthDate",
title: "Birth Date",
format: "{0:MM/dd/yyyy HH:mm tt}",
filterable: {
ui: "datetimepicker"
}
}
I tried to do this on my column, but it didn't work:
cols.Bound(c => c.DateOfServiceString).Title("Assessment Date").Filterable(filterable => filterable.UI("datetimepicker"));

Answer 1

There is an option to view cshtml code in the kendo demo page itself.
Here is the link you need.
http://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization
Also, I believe if the data is coming as DateTime, kendo will automatically convert it to javascript date object. Hope this helps.

Answer 2

I have a feeling i've stumbled across this issue - try adding this JS snippet after your Grid Helper.
<script type="text/javascript">
function datetimepicker(control) {
$(control).kendoDateTimePicker();
}
</script>

Answer 3

I have this working in my code. I have define the column type as date and converted the date string to Date object.
Here is the code that defines the column
column.field= 'c5',
column.title= "Date",
column.type = 'date',
column.template = '#= kendo.toString(c5, "g" ) #';
column.filterable = {
operators: {
date: {
lt: "Lesser than",
gt: "Greater than"
}
}
}
After I fetch the data from the server, I convert it to Date object.
vm.feedbacks = [];
rows.forEach(function (row) {
row.forEach(function (column, index) {
var key = 'c' + index;
feedback[key] = column;
if (gridColumns.gridAllColumns[index].type === 'date') {
feedback[key] = new Date(column);
};
});
vm.feedbacks.push(feedback);
});