Customizing Grid Wrapper Filter Operator Behavior

1 Answer 91 Views
Grid wrapper
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
Alex asked on 28 Jun 2021, 03:52 PM

I have some grids that have a date/time column. The default equality operators for the filter match both the date and time. I am trying to customize the equality operator (or add a new operator) that ignores the time and only compares the date. Using a custom operator works the first time I select the operator. When I go back to the filter menu after setting it the first time, the dropdown has no operator selected and I changing the value again doesn't work until after I select equals again.

How can I have the equals operator remain selected or add a new operator?

If this isn't supported, are there any other ways I can accomplish the same thing? I want to display both the date and time, but have equals only filter on the date.

Here is some example code: https://stackblitz.com/edit/custom-filter-only?file=src/main.vue

1 Answer, 1 is accepted

Sort by
0
Accepted
Petar
Telerik team
answered on 30 Jun 2021, 11:10 AM

Hi Alex,

Check this StackBlitz example that demonstrates how the targeted functionality can be implemented. To achieve the linked implementation, I've used this Filter by Date Only Knowledge base article from the Kendo UI for jQuery suite. 

One of the important things in the implementation is the usage of the parse configuration of the dataSource.

parse: function(data) {
        var events = [];
        for (var i = 0; i < data.length; i++) {
        var event = data[i];
        event.OrderDateOnly = kendo.toString(event.OrderDate, 'yyyy/MM/dd');
        events.push(event);
    }
    return events;
}

With the above code, we add a new field(OrderDateOnly) to Grid's datasource. Then in the Grid's configuration, we have the following column definition:

<kendo-grid-column :field="'OrderDateOnly'"
                    :title="'Order Date'"
                    :width="180"
                    :template="'#= kendo.toString(OrderDate, \'yyyy/MM/dd HH:mm\') #'"
                    :filterable-ui="'datepicker'">
</kendo-grid-column>

With the code in yellow, we define a template that will display the full date and hour from the OrderDate field, but the filtering will be done over the OrderDateOnly field.

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid wrapper
Asked by
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Petar
Telerik team
Share this question
or