Gird filter not showing datepicker

11 posts, 0 answers
  1. Michael
    Michael avatar
    9 posts
    Member since:
    Feb 2015

    Posted 16 Feb 2015 Link to this post

    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?
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 18 Feb 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Michael
    Michael avatar
    9 posts
    Member since:
    Feb 2015

    Posted 18 Feb 2015 in reply to Petur Subev Link to this post

    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();
                            }
                        }
                    }
  5. Michael
    Michael avatar
    9 posts
    Member since:
    Feb 2015

    Posted 18 Feb 2015 in reply to Michael Link to this post

    Here is the demo I was referring to by the way: http://demos.telerik.com/kendo-ui/grid/filter-row
  6. Michael
    Michael avatar
    9 posts
    Member since:
    Feb 2015

    Posted 18 Feb 2015 Link to this post

    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);
            }
        });
    });
  7. Michael
    Michael avatar
    9 posts
    Member since:
    Feb 2015

    Posted 18 Feb 2015 in reply to Michael Link to this post

    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?
                                    }
                                });
                            }
                        }
                    }
                },
  8. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 19 Feb 2015 Link to this post

    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!
     
  9. Michael
    Michael avatar
    9 posts
    Member since:
    Feb 2015

    Posted 19 Feb 2015 in reply to Petur Subev Link to this post

    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?
  10. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 20 Feb 2015 Link to this post

    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!
     
  11. Linda
    Linda avatar
    1 posts
    Member since:
    Dec 2015

    Posted 20 Sep in reply to Petur Subev Link to this post

    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

  12. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    353 posts

    Posted 22 Sep Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready