Creating a custom Date Range Filter for a grid using Filter menu

[Ryan]

We are wanting to implement a date range filter in our Kendo Grid. We use the filter menu (`"filterable"='menu'`). We found a great example for the `row` style filter:

 

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-row#using-daterange

 

Trying to convert it to a filter menu (which should be as simple as changing`kendoGridFilterCellTemplate` to `kendoGridFilterMenuTemplate`) it doesn't work. It shows up, but interacting with it at all produces an error. Live example:

https://stackblitz.com/edit/angular-cdgpy4-xaa6tw?file=src%2Fapp%2Fapp.component.ts

 

Looking for a bit of help here on how to implement this.

[Hetali]

Hi Ryan,

Thank you for reaching out and sharing the details. 

Indeed, by changing the FilterCellTemplateDirective to FilterMenuTemplateDirective is the right way to go. However, the Filter Menu popup closes when the user clicks outside it's container. So, when you're selecting the range in the Date Range popup, the Filter Menu popup triggers it's close event and that's when you see the error. For more information, please refer to our Filter Menu with Popup article.

In order to prevent the Filter Menu popup from closing when you're selecting the date range, add the following snippet in the date-range-filter.component.ts file:

import { ElementRef, OnDestroy } from "@angular/core";
import { SinglePopupService, PopupCloseEvent } from "@progress/kendo-angular-grid";
import { Subscription } from "rxjs";

const closest = ( node: HTMLElement, predicate: (node: HTMLElement) => boolean): HTMLElement => {
  while (node && !predicate(node)) {
    node = node.parentNode as HTMLElement;
  }
  return node;
};

export class DateRangeFilterCellComponent extends BaseFilterCellComponent implements OnDestroy {
  private popupSubscription: Subscription;

  constructor(private element: ElementRef, private popupService: SinglePopupService) {
    this.popupSubscription = popupService.onClose.subscribe(
      (e: PopupCloseEvent) => {
        if ( document.activeElement && closest( document.activeElement as HTMLElement, (node) => node === this.element.nativeElement || String(node.className).indexOf("k-animation-container") >= 0 )) {
          e.preventDefault();
        }
      }
    );
  }

  public ngOnDestroy(): void {
    this.popupSubscription.unsubscribe();
  }
}

In this updated StackBlitz example, the Date Range filter works in the Filter Menu of the Kendo UI Grid.

I hope this helps. Please let me know if you have any further questions.

Regards,
Hetali
Progress Telerik

[Ryan]

Thanks so much for the quick explaination! The updated stackblitz looks like it works, we'll try to apply to our codebase. 

We also found out that the error technically comes from a quirk in Chrome: https://groups.google.com/a/chromium.org/g/blink-dev/c/L1aI9JZTrBs/m/8HqhILBoDQAJ?pli=1

In Firefox, the original example doesn't error out, but it still closes the filter menu which is undesirable. Its good to see documentation cover the use-case of a popup opening another popup.

In case anyone else comes across this, we are additionally considering an alternative of using a calendar component with a range selector, instead of having two date inputs with a date range popup. That would avoid having to implement the solution provided (and in certain cases, might look better)