Display Kendo Grid column as DateTime but ignore Time when filtering

Question

I have a Kendo Grid and a column "Sale Time" displayed as MM/dd/yyyy HH:mm a (1/3/2015 2:34 PM).

Now I want to be able to filter by Date only, ignoring the Time. But by default, the filter is looking at Time, so any date I filter using "Is Equal To" returns no results.

Here's a JSFiddle I made to illustrate the issue: http://jsfiddle.net/dmathisen/yx7huvxp/

And some code so I can post the jsfiddle link :)

columns: [
    { field: "ModelName", title: "Model" },
    { field: "DefaultMonoCPP", title: "Mono Cost" },
    { field: "SaleTime", title: "Sale Time", format: "{0:g}" }
]

Answer 1

You can define a schema.parse function that generates an additional field called SaleDate that contains only the Date part of the SaleTime.

Then, when showing the columns in the grid, you use this.

Something like:

// Schema definition
schema: {
    model: {
        id: "ModelID",
        fields: {
            ModelName: { type: "string" },
            DefaultMonoCPP: { type: "number" },
            SaleTime: { type: "date" },
            SaleDate: { type: "date" }  // Additional field with the `Date` of `SaleTime`
        }
    },
    parse: function(d) {
        $.each(d, function(idx, elem) {
            // Compute SaleDate from SaleTime
            elem.SaleDate = kendo.parseDate(elem.SaleTime, "MM/dd/yyyy");
        });
        return d;
    }        
}

// Columns definition
columns: [
    {
        field: "ModelName",
        title: "Model"
    },
    {
        field: "DefaultMonoCPP",
        title: "Mono Cost"
    },
    {
        field: "SaleDate",
        title: "Sale Time",
        template: "#= kendo.toString(SaleTime, 'g') #"
    }
],

Your JSFiddle modified here: http://jsfiddle.net/OnaBai/yx7huvxp/10/