This is a migrated thread and some comments may be shown as answers.

Gird filter not showing datepicker

10 Answers 343 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 16 Feb 2015, 11:02 AM
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?

10 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 18 Feb 2015, 08:07 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Michael
Top achievements
Rank 1
answered on 18 Feb 2015, 11:37 AM
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();
                        }
                    }
                }
0
Michael
Top achievements
Rank 1
answered on 18 Feb 2015, 11:45 AM
Here is the demo I was referring to by the way: http://demos.telerik.com/kendo-ui/grid/filter-row
0
Michael
Top achievements
Rank 1
answered on 18 Feb 2015, 01:41 PM
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);
        }
    });
});
0
Michael
Top achievements
Rank 1
answered on 18 Feb 2015, 04:03 PM
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?
                                }
                            });
                        }
                    }
                }
            },
0
Petur Subev
Telerik team
answered on 19 Feb 2015, 08:31 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Michael
Top achievements
Rank 1
answered on 19 Feb 2015, 08:38 AM
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?
0
Petur Subev
Telerik team
answered on 20 Feb 2015, 02:14 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Linda
Top achievements
Rank 1
answered on 20 Sep 2016, 01:02 PM

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

0
Dimiter Topalov
Telerik team
answered on 22 Sep 2016, 01:05 PM
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
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Michael
Top achievements
Rank 1
Linda
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or