Is there a way to define different default operator for primary and secondary criteria for DateRange filter?

[Matti]

When using Menu filters I can define date range filter in the following way

<kendo-grid-date-filter-menu
    [filter]="filter"
    [operator]="filterOperator"
    [column]="column"
    [filterService]="filterService"
    [extra]="true"
  >
    <kendo-filter-gte-operator text="{{'Is greater or equal'|i18n}}"></kendo-filter-gte-operator>
    <kendo-filter-gt-operator text="{{'Is greater than'|i18n}}"></kendo-filter-gt-operator>
    <kendo-filter-lte-operator text="{{'Is less or equal'|i18n}}"></kendo-filter-lte-operator>
    <kendo-filter-lt-operator text="{{'Is less than'|i18n}}"></kendo-filter-lt-operator>
    <kendo-filter-eq-operator text="{{'Is equal to'|i18n}}"></kendo-filter-eq-operator>
    <kendo-filter-neq-operator text="{{'Is not equal to'|i18n}}"></kendo-filter-neq-operator>
    <kendo-filter-isempty-operator text="{{ 'Is empty' | i18n }}"></kendo-filter-isempty-operator>
    <kendo-filter-isnotempty-operator text="{{ 'Is not empty' | i18n }}"></kendo-filter-isnotempty-operator>
  </kendo-grid-date-filter-menu>

Both the primary and secondary search criteria now get the same list of operators and in the same order. As the end used most likely wants to filter some date range this means that every time the user needs to also change the operator in addition to selecting dates. So is there a built-in way to have a different default operator for only the secondary criteria?

Even more cool would be some kind of interactive selection component where user can define start and end date. Similar to DateRange picker of materia UI.

[Hetali]

Hello Matti,

Currently, we do not have a built-in feature to set the default operator of the secondary criteria in the Filter Menu of the Kendo UI Grid. To see this feature added in the future, please vote and follow this feature request. Based on the votes, feasibility, etc, the feature will be considered and added to our roadmap.

To add an interactive selection component like the Kendo UI DateRange, we have a dedicated article for Filter Menu with Popup. Using the example, please make the following changes in the data-range-filter.component.ts file:

<div class="k-form">
  <kendo-daterange>
    <label>
      <span class="label">Start</span>
      <kendo-dateinput
        kendoDateRangeStartInput
        (valueChange)="onStartChange($event)"
        [(ngModel)]="start" 
        [max]="max"
      >
      </kendo-dateinput>
    </label>
    <label>
      <span class="label">End</span>
      <kendo-dateinput
        kendoDateRangeEndInput
        (valueChange)="onEndChange($event)"
        [(ngModel)]="end" 
        [min]="min"
      >
      </kendo-dateinput>
    </label>
    <kendo-daterange-popup 
      appendTo="component" 
      #popup
    >
    </kendo-daterange-popup>
  </kendo-daterange>
</div>

@ViewChild('popup') public popup;

public onStartChange(value: any): void {
  this.filterRange(value, this.end);
}

public onEndChange(value: any): void {
  this.filterRange(this.start, value);
  setTimeout(() => {
    this.popup.toggle({show: false})
  });
}

In this StackBlitz example, I have added an interactive DateRange in the Filter Menu of the Kendo UI Grid.

Please give it a try and let me know if it helps or if I can further assist you.

Regards,
Hetali
Progress Telerik