Edit this page

Use Grid Filtering with Kendo UI DateTimePickers in Row Modes

Your project might require you to create range filtering for dates in the Grid by using two Kendo UI DateTimePickers in row filtering modes.

To see how the following example works, filter the date column in a range. As a result, the Grid filters the data in the given range.

Example
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script> 

<div id="example">
    <div id="grid"></div>

    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    data: createRandomData(50),
                    schema: {
                        model: {
                            fields: {
                                City: { type: "string" },
                                Title: { type: "string" },
                                BirthDate: { type: "date" }
                            }
                        }
                    },
                    pageSize: 15
                },
                height: 550,
                scrollable: true,
                filterable: {
                    extra: false,
                    mode: "row"
                },
                pageable: true,
                columns: [
                    {
                        title: "Name",
                        template: "#=FirstName# #=LastName#"
                    },
                    {
                        field: "BirthDate",
                        title: "Birth Date",
                        format: "{0:MM/dd/yyyy}",
                        filterable: {
                            cell: { template: betweenFilter }

                        }
                    },
                    {
                        field: "City",
                        filterable: {
                            cell: { template: cityFilter }

                        }
                    }
                ]
            });
        });

        function cityFilter(args) {
            args.element.kendoDropDownList({
                dataSource: cities,
                optionLabel: "--Select Value--"
            });
        }
        function betweenFilter(args) {
            var filterCell = args.element.parents(".k-filtercell");

            filterCell.empty();
            filterCell.html(`
                            <span style="display:flex; justify-content:center;">
                                <span>From:</span>
                                <input  class='start-date'/>
                                <span>To:</span>
                                <input  class='end-date'/>
                            </span>
                            `);

            $(".start-date", filterCell).kendoDatePicker({
                change: function (e) {
                    var startDate = e.sender.value(),
                        endDate = $("input.end-date", filterCell).data("kendoDatePicker").value(),
                        dataSource = $("#grid").data("kendoGrid").dataSource;

                    if (startDate & endDate) {
                        var filter = { logic: "and", filters: [] };
                        filter.filters.push({ field: "BirthDate", operator: "gte", value: startDate });
                        filter.filters.push({ field: "BirthDate", operator: "lte", value: endDate });
                        dataSource.filter(filter);
                    }
                }
            });
            $(".end-date", filterCell).kendoDatePicker({
                change: function (e) {
                    var startDate = $("input.start-date", filterCell).data("kendoDatePicker").value(),
                        endDate = e.sender.value(),
                        dataSource = $("#grid").data("kendoGrid").dataSource;

                    if (startDate & endDate) {
                        var filter = { logic: "and", filters: [] };
                        filter.filters.push({ field: "BirthDate", operator: "gte", value: startDate });
                        filter.filters.push({ field: "BirthDate", operator: "lte", value: endDate });
                        dataSource.filter(filter);
                    }
                }
            });

        }
    </script>
</div>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy