Kendo Grid Date Filter

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);
});