Implementing a DateTimePicker Filter in Grid

Environment

Description

How to implement a DateTimePicker as a custom Grid filter row component?

Solution

By default, the Grid uses the DatePicker as the built-in component when filtering a date column. To use DateTimePicker instead, customize the default filter with the FilterCellTemplateDirective.

1. Use the FilterCellTemplateDirective in the column whose filter needs to be customized.

   Copy Code<kendo-grid-column field="FirstOrderedOn">
       <ng-template kendoGridFilterCellTemplate let-filter>
           ...
       </ng-template>
   </kendo-grid-column>

2. In a separate file create the DateTimePicker component that is going to act as a filter in the Grid.

   Copy Code<kendo-datetimepicker (valueChange)="onChange($event)" [format]="'dd/MM/yyyy'">
   </kendo-datetimepicker>

3. Handle the DateTimePicker's built-in valueChange event and use the applyFilter and updateFilter methods of the BaseFilterCellComponent to filter the column.

   Copy Codeexport class DateTimeFilterComponent extends BaseFilterCellComponent {
       ...
       constructor(filterService: FilterService) {
           super(filterService);
       }
   
       public onChange(value: any): void {
           this.applyFilter(
               this.updateFilter({
                   field: this.valueField,
                   operator: 'eq',
                   value: value
               })
           );
       }
   }

4. To clear the filter, handle the click event of a button and use the removeFilter method of the BaseFilterCellComponent.

   Copy Codepublic clearFilter() {
       this.applyFilter(this.removeFilter('FirstOrderedOn'));
       ...
   }    

5. Optionally, you can toggle the visibility of the button based on the applied filter with the *ngIf Angular directive.

   Copy Code<button kendoButton *ngIf='clearButton' ...></button>

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