CODEWITHSUNDEEP
sortingdatefilterkendo-uigrid
Aloysius Mahesh
Aloysius Mahesh

Reputation: 11

kendo grid date filter not working with before and after

I'm using a kendo grid to display the data. When I filter on the date field specifying a date value (equals) then it works fine. But when I use the before or after conditions in the filter, it filters the data incorrectly.

Also sorting on the date field does not sort it properly. Any help would be greatly appreciated. FYI: I used the moment.js to format the data in dd/mm/yyyy format.

Here is the code snippet with the data: 

$("#testgrid").kendoGrid({
    change:onChange,
    dataSource: {
        data: [
            {"No":"27691","ClientName":"ABC","ExpiryDate":"2015-03-14T00:00:00Z"},
            {"No":"27691","Name":"DEF","ExpiryDate":"2016-03-22T00:00:00Z"},
            {"No":"27691","Name":"ABC","ExpiryDate":"2015-02-28T00:00:00Z"},
            {"No":"27691","Name":"ABC","ExpiryDate":"2011-07-03T00:00:00Z"},
            {"No":"27691","Name":"ABC","ExpiryDate":"2015-07-31T00:00:00Z"},
            {"No":"27691","Name":"ABC","ExpiryDate":null},
            {"No":"27691","Name":"ABC","ExpiryDate":"2012-04-30T00:00:00Z"}
        ],
        schema: {
            model: {
                fields: {
                    No: { type: "string" },
                    ExpiryDate: {
                        type: "date",
                        parse: function(inputdate) {
                            var dtval = moment(inputdate).format('DD/MM/YYYY');

                            if (dtval == "Invalid date")
                                return "";
                            else  return dtval;}
                        },
                        Name: { type: "string" }
                    }
                }
            },
            pageSize: 20
        },
        height: 550,
        selectable: "single row",
        allowCopy: true,
        resizable: true,
        groupable: true,
        sortable: true,
        filterable: {
            mode: 'row',
            extra: false,
            operators: {
                string: {
                    startswith: "Starts with",
                    eq: "Is equal to",
                    neq: "Is not equal to"
                }
            }
        },
        pageable: true,
        columns: [
            { field: "No", title: "Number", filterable: { cell: { showOperators: true, operator: "contains" } } , width: 150 },
                    { field: "Name", title: "Name",  filterable: { cell: { showOperators: true} }, width: 150 },                         
                    { field: "ExpiryDate", title: "Expiry Date",
                      format: "{0:dd/MM/yyyy}",   filterable: {
                                cell: {
                                    template: function (args) {
                                    args.element.kendoDatePicker({
                                    format: "{0:dd/MM/yyyy}"
                                        });
                                    }
                                }}
                    , width: 150 }
                   ]
                });`

Upvotes: 1

Views: 4798

Answers (2)

D.Fraser
D.Fraser

Reputation: 41

Interestingly, I've been struggling with an issue related to the filter field its self; I couldn't change the format of the date...

Your section of code for the "ExpiryDate" field helped solve my problem!

{ filterable: { cell: { template: function (args) { args.element.kendoDatePicker({ format: "{0:dd/MM/yyyy}" }); } }}

Thought it might be useful to highlight this for others.

Upvotes: 2

sfuqua
sfuqua

Reputation: 5853

Removing the parse setting in the schema probably solves the sorting problem. On the filtering, perhaps the "problem" is that your dates are in UTC, but Kendo displays them in your browser's local time, and you need to deal with time.

I am in US Central Daylight Time (CDT), so 2015-03-14T00:00:00Z shows as 13/03/2015 in the grid. If I use an "equals" filter with 13/03/2015 then I get no results in the grid. Same thing - no result - with 14/03/2015. If I change the datepicker template format to dd/MM/yyyy HH:mm:ss and filter by equals 13/03/2015 19:00:00 then I get that entry, as expected.

Thus in order to use "equals" you must have (a) the time component and (b) remember the conversion of local to UTC.

Demo in Kendo Dojo

Upvotes: 0

Related Questions