Filtering the Grid Data by Using the TimePicker

Environment

Product

Progress® Kendo UI® for Angular Data Grid

Progress® Kendo UI® for Angular TimePicker

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.

   html

   <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.

   html

   <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.

   ts

   public 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.

   ts

   public 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.

Change Theme

Theme

Loading ...