kendoUI: DateTime-Filter für Grid

Das Filtern von Datums/Zeitangaben wird von kendoGrid standardmässig nicht komplett unterstützt. Genauer gesagt schlägt die Suche nach “ist gleich” fehl, da diese Prüfung auch die Uhrzeit mit einschliesst. Mit dem folgenden Code kann der Filter für Datumsspalten so überschrieben werden, dass auch Datums/Zeit-Spalten gefiltert werden können.

$('#grid').kendoGrid({
    // ...

    /**
     * Modify column filter for dateTime columns (not fully supported by kendo)
     *
     * @param e Event
     */
    filterMenuInit: function(e) {
        var _this = e;
        var filterWindow = $(_this.container);
        var grid = _this.sender;

        filterWindow.on('click', 'button[type=submit]', function(e) {
            // Gets filter type
            var filterType = filterWindow.find('select[data-role=dropdownlist]').eq(0).val();
            var datePicker = filterWindow.find('input[data-role=datepicker]');

            // If filter is 'Is equal to' and value is given by datePicker
            if (filterType === 'eq' && datePicker.length > 0) {
                e.preventDefault();

                //gets the datePicker input date
                var selectedDate = datePicker.eq(0).data('kendoDatePicker').value();
                var hasFilters = !!grid.dataSource.filter();
                var dateFilter = {
                    field: _this.field,
                    //create custom filter operator
                    operator: function(fieldDate) {
                        // Replace this with your own date comparison
                        return isSameDate(fieldDate, selectedDate);
                    },
                    value: kendo.toString(selectedDate, 'yyyy/MM/dd') // Kendo was really picky on this one. Only strings are supported.
                };

                // Determine if filters need to be extended
                if (hasFilters) {
                    var foundEntry = false;

                    // Check if filter is already part of filters
                    $.each(grid.dataSource._filter.filters, function(key, val) {
                        if (val.field === dateFilter.field) {
                            // Replace existing filter
                            grid.dataSource._filter.filters[key] = dateFilter;
                            foundEntry = true;
                        }
                    });

                    // If no existing filter found, add it
                    if (!foundEntry) {
                        grid.dataSource._filter.filters.push(dateFilter);
                    }

                    // Update grid to apply filter
                    grid.dataSource.fetch();

                } else {
                    grid.dataSource.filter(dateFilter);
                }

                //close filter window
                filterWindow.data('kendoPopup').close();
            }
        });
    }
});