Gird filter not showing datepicker

[Michael]

Hi,

I am using the Kendo UI grid for the first time and generally so far, so good. I do have one issue though where I cannot get the date picker to show next to a filterable column. I've read the documentation but it doesn't seem to work for some reason - it filters like a string. here is my code:

The JSON:
"date_of_birth":"2015-01-27 12:00:00.0",

The Javascript:

$(document).ready(function () {
    $.support.cors = true; // For IE8 & 9
    $("#patientList").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: "http://10.100.23.92:8082/biodose-connect/patients",
                    dataType: "json",
                    type: "GET"
                }
            },
            pageSize: 5
        },
        schema: {
            model: {
                fields: {
                    fullname: { type: "string" },
                    date_of_birth: { type: "date" },
                    nhsnumber: { type: "string" },
                    postcode: { type: "string" }
                }
            }
        },
        reorderable: true,
        groupable: true,
        sortable: true,
        filterable: {
            mode: "row"
        },
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5,
            messages: {
                itemsPerPage: "patients per page"
            }
        },
        columnMenu: {
            columns: true,
            filterable: false,
            sortable: true
        },
        columns: [
            {
                width: 60,
                template: "<i class='glyphicon glyphicon-user default-userImg'> </i>"
            },
            {
                field: "title",
                title: "Title",
                width: 100,
                filterable: false
            },
            {
                field: "fullname",
                title: "Patient Name",
                filterable: {
                    cell: {
                        showOperators: true,
                        operator: "contains",
                        suggestionOperator: "contains"
                    }
                }
            },
            {
                field: "date_of_birth",
                title: "DOB",
                format: moment().format("Do MMM YYYY"),
                width: 200,
                filterable: {
                    ui: "datepicker",
                    cell: {
                        showOperators: false,
                        operator: "contains",
                        suggestionOperator: "contains"
                    }
                }
            },
            {
                field: "nhsnumber",
                title: "NHS Number",
                width: 200,
                filterable: {
                    cell: {
                        showOperators: false
                    }
                }
            },
            {
                field: "postcode",
                title: "Postcode",
                width: 200,
                filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains",
                        suggestionOperator: "contains"
                    }
                }
            }
        ],
        selectable: "row",
        change: function(e) {
            var grid = $("#patientList").data("kendoGrid");
            var selectedRow = grid.dataItem(grid.select());
            console.log(selectedRow.patient_id)
        }
    });
});

I've attached a screenshot of my HTML output showing no date picker on the filter. Have I missed something?

[Petur Subev]

Hello Michael,

In order to change the default filtering input you need to use the filterable.cell.template, not filterable.ui as highlighted in the documentation:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.filterable.ui

I hope this helps.

Kind Regards,
Petur Subev
Telerik

 

 

[Michael]

Thanks, that shows a date picker. So I understand for future, why was the date not recognized from the schema as per the demos? I wasn't trying to change the default behavior.

If you could show how I duplicate the default behavior in the demo to show the selected filter date in the picker, that would be appreciated. here is what i added:

filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains",
                        suggestionOperator: "contains",
                        template: function(args) {
                            args.element.kendoDatePicker();
                        }
                    }
                }

[Michael]

Here is the demo I was referring to by the way: http://demos.telerik.com/kendo-ui/grid/filter-row

[Michael]

I've made some progress with this. It transpired the schema was doing nothing and moving the type down to the column shows a date picker by default. The filter is not working, but I now at least have the right control displaying. here is my updated code in full:

$(document).ready(function () {
    var baseUrl = getBaseUrl();

    $.support.cors = true; // For IE8 & 9
    $("#patientList").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: baseUrl + "/patients",
                    dataType: "json",
                    type: "GET"
                }
            },
            pageSize: 5
        },
        reorderable: true,
        groupable: true,
        sortable: true,
        filterable: {
            mode: "row"
        },
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5,
            messages: {
                itemsPerPage: "patients per page"
            }
        },
        columnMenu: {
            columns: true,
            filterable: false,
            sortable: true
        },
        columns: [
            {
                width: 60,
                template: "<i class='glyphicon glyphicon-user default-userImg'> </i>"
            },
            {
                field: "title",
                title: "Title",
                width: 100,
                filterable: false
            },
            {
                field: "fullname",
                title: "Patient Name",
                filterable: {
                    cell: {
                        showOperators: true,
                        operator: "contains",
                        suggestionOperator: "contains"
                    }
                }
            },
            {
                field: "date_of_birth",
                type: "date",
                title: "DoB",
                format: "{0:dd MMM yyyy}",
                width: 200,
                filterable: {
                    cell: {
                        showOperators: false
                    }
                }
            },
            {
                field: "nhsnumber",
                title: "NHS Number",
                width: 200,
                filterable: {
                    cell: {
                        showOperators: false
                    }
                }
            },
            {
                field: "postcode",
                title: "Postcode",
                width: 200,
                filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains",
                        suggestionOperator: "contains"
                    }
                }
            }
        ],
        selectable: "row",
        change: function(e) {
            var grid = $("#patientList").data("kendoGrid"),
                selectedRow = grid.dataItem(grid.select()),
                url = "/patients/" + selectedRow.patient_id + "/trays";

            location.replace(url);
        }
    });
});

[Michael]

I'm sure this should be easier...

{
                field: "date_of_birth",
                type: "date",
                title: "DoB",
                format: "{0:dd MMM yyyy}",
                width: 200,
                filterable: {
                    cell: {
                        showOperators: false,
                        template: function(args) {
                            args.element.kendoDatePicker({
                                format: "{0:dd MMM yyyy}",
                                change: function() {
                                    var selection = moment(this.value()).format("DD MMM YYYY");
                                    // How do I filter the grid with the selection?
                                }
                            });
                        }
                    }
                }
            },

[Petur Subev]

Hello Michael,

The input that you turn into DatePicker is bound through MVVM to a model that on change automatically performs a dataSource filter, you do not have to manually perform a fltering using the Change event of the DropDownList.

Could you please elaborate what exactly is the issue that you struggle with?

Kind Regards,
Petur Subev
Telerik

 

 

[Michael]

My requirement is quite simple really. I am trying to filter by a date on a grid as is shown in your demo.

My issue is that, as I posted 3 days ago, at first the grid wasn't picking up the date type as a date and therefore not showing the date picker in the filter. Now I have got it to show a date picker it does not filter the data as matching dates do not return any rows in the grid.

Can you give me a working JSON example of the grid where you can filter by date please?

[Petur Subev]

Hello Michael,

I assume the problem is actually coming from the fact that when you select a date, this date is compared with DATE+TIME with the values from the different records. There is no way to change this. You need to either change your records to have their TIME part of the dates to be all 12:00AM, so when compared with the selected date from the filter menu they will match.

If not your only option remains to enable serverFiltering for your dataSource and implement comparing on the server.

Kind Regards,
Petur Subev
Telerik

 

 

[Linda]

Hi,  

Did this ever get resolved?  I'm having issues filtering dates client-side on a KendoUI grid.  The date in the date column also contain the time and I want to display the full date and time in the column, but on filtering I want to filter just the date portion ignoring the time.  I want a DatePicker to be displayed in the column heading for filtering.    Is this possible?

 

Thanks,

Linda

[Dimiter Topalov]

Hello Linda,

You can use any of the approaches, described in the following how to article from our documentation:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/filtering/filter-by-date

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress