Filtering the Grid Data by Using the TimePicker

Environment

Description

How can I filter the Grid data by time only with the Kendo UI for Angular TimePicker component?

Solution

To achieve the desired scenario and filter the data of the Data Grid by using the TimePicker component:

1. Create a custom filter by using the kendoGridFilterCellTemplate directive.

   Copy Code<kendo-grid-column field="FirstOrderedOn" format="HH:mm:ss">
       <ng-template kendoGridFilterCellTemplate let-filter>
           <time-filter-cell
             [filter]="filter"
             field="FirstOrderedOn">
           </time-filter-cell>
       </ng-template>
   </kendo-grid-column>

2. In the custom filter component, define the TimePicker along with the FilterCellOperatorsComponent, and handle the necessary events to filter the Grid data.

   Copy Code<kendo-timepicker [value]="value" (valueChange)="setTimeFilter($event)"></kendo-timepicker>
   <kendo-grid-filter-cell-operators
       ...
       (valueChange)="changeOperator($event)"
       [value]="operator">
   </kendo-grid-filter-cell-operators>

3. Inside the valueChange event handler of the TimePicker, create the necessary FilterDescriptor.

   Copy Codepublic setTimeFilter(start: Date): void {
       const filter: FilterDescriptor = {
           field: this.field,
           operator: this.filterTime.bind(this),
           value: start
       };
       ...
   }

   Comparing times only requires a custom compare function, because internally the filters treat dates as numbers.

   Copy Codepublic filterTime(dataItemValue: number, filterValue: number): boolean {
       const dataItemDate = this.applyDefaultDate(dataItemValue);
       const filterDate = this.applyDefaultDate(filterValue);
       ...
       return this.operator === 'lte'
         ? dataItemDate.getTime() <= filterDate.getTime()
         : dataItemDate.getTime() >= filterDate.getTime();
   }

The following example demonstrates the suggested approach for filtering the Grid data by using TimePicker component.