Angular Configuring a DateTimePicker Filter in Grid Column Menu

New to Kendo UI for Angular? Start a free 30-day trial

Environment

Product

Progress® Kendo UI for Angular Grid

By default, the DatePicker is the built-in filtering component for date columns in the Grid. How can I customize the default column menu filter of the Grid and implement a DateTimePicker filter for date columns?

Solution

To customize the column menu filter of the Grid with a DateTimePicker for date columns, create a custom filter component and use it within the FilterMenuTemplateDirective. The next steps go into more detail about how to achieve the suggested approach:

Use the FilterMenuTemplateDirective in the column whose filter needs to be customized.

html

<kendo-grid-column field="FirstOrderedOn" title="First Ordered On">
    <ng-template
        kendoGridFilterMenuTemplate
        let-column="column"
        let-filter="filter"
        let-filterService="filterService">
      ...
    </ng-template>
</kendo-grid-column>

In a separate file, create a custom component containing a DateTimePicker that will take as inputs the filter and FilterService fields, passed by the context of the FilterMenuTemplateDirective.

html

<kendo-grid-column field="FirstOrderedOn" title="First Ordered On">
    <ng-template
        kendoGridFilterMenuTemplate
        let-column="column"
        let-filter="filter"
        let-filterService="filterService">
        <my-date-time-filter 
            [field]="column.field"
            [filter]="filter"
            [filterService]="filterService">
        </my-date-time-filter>
    </ng-template>
</kendo-grid-column>

Set the value of the DateTimePicker to the current column filter upon the initialization of the component.

public ngOnInit(): void {
    const currentColumnFilter = 
        this.filter.filters.find(
            (filter: FilterDescriptor) => filter.field === this.field
        );
    if (currentColumnFilter) {
        this.value = (currentColumnFilter as FilterDescriptor).value;
    }
}

Handle the built-in valueChange event of the DateTimePicker and use the filter() method of the filterService to set the current column filter.

public onValueChange(value: Date): void {
    const filters = [{
        field: this.field,
        operator: 'eq',
        value: value,
    }];

    this.filterService.filter({
        logic: 'and',
        filters: filters,
    });
}

Prevent the column menu from closing upon clicking in the DateTimePicker's calendar popup by following the manner demonstrated in the Filter Menu with Popup article.

The following example shows the full implementation of the described approach.

Change Theme

Theme

Loading ...

Configuring a DateTimePicker Filter in Grid Column Menu

Environment

Description

Solution

See Also