Custom Filter Menu with Popup

[Veronika]

Hello, I need to create custom filter menu for my grid with two datepickers - similar to this example.
My constructor looks like this:

constructor(private element: ElementRef,  private popupService: SinglePopupService) {
    ...
}

 

I inject the SinglePopupService as shown in the StackBlitz example, in order to be able to prevent closing the datepicker popup, but it's not working - I'm getting the following error:

NullInjectorError: R3InjectorError(MyLazyLoadedModule)[SinglePopupService -> SinglePopupService -> SinglePopupService -> SinglePopupService]: NullInjectorError: No provider for SinglePopupService!

I'm using this functionality in a lazy loaded module of my app, but I have the GridModule as well as the DateInputsModule imported.

Could you please help me with this?

[Veronika]

I see the link to the example is broken - it is the example from this documentation: https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/#toc-filter-menu-with-popup

[Yanmario]

Hi Veronika,

Thank you for the provided information and fixed link to our documentation. The demo from the referenced documentation article seems to function properly. Please see it at the following link and let me know in case I am missing something. Thank you.

https://stackblitz.com/edit/angular-mna8qw?file=app/app.component.ts

The issue on your side might be caused by incorrect imports. Please make sure the imports are as follow:

app.module

import { GridModule } from '@progress/kendo-angular-grid';
import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
import { DateRangeFilterComponent } from './date-range-filter.component';

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    GridModule,
    DatePickerModule
  ]

date-range-filter.component

import { Component, Input, OnInit, OnDestroy, ElementRef } from '@angular/core';
import { FilterService, SinglePopupService, PopupCloseEvent } from '@progress/kendo-angular-grid';

 

Also, it's recommended to use the latest versions of our packages that contain all current features and bug fixes. Here is a quick guide for updating all Kendo UI for Angular packages in one go:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/#toc-updating-to-latest-versions

If the issue persists, can you please provide me with additional information about the component implementation and the package versions. This will provide me the needed tools to further troubleshoot the issue. Thank you.

Regards,
Yanmario Menev
Progress Telerik

[Mirko]

I have the exact same issue, and the imports are good definitely. Do you have an alternate approach to this issue?

[Raghu]

same here getting the dependency injection error.

[Martin Bechev]

Hi Raghu,

Since the thread has been on for almost 2 years, I want to make sure that we are looking in the same direction.

If I understand correctly, a custom filter menu is used which has a component that opens its own popup (DatePicker, DropDownList, etc.). For this case to keep the popup of the DatePicker/DropDownLst component opened while the filter menu is opened, SinglePopupService needs to be used in order to prevent the closing of the filter menu when the focus is changed (for example, when clicking an option from the DropDownList). Please check the following article for more details:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-menu/#toc-filter-menu-with-popup

In case you are experiencing any issues please provide some more detail about the used versions, and the code snippet of the Grid (HTML, TS) so that we can provide further assistance. Thank you in advance.

[Dominik]

unfortunately the same problem for me 
NullInjectorError: NullInjectorError: No provider for SinglePopupService!

 

i just want to make some additional logic after grid filter closed... but its not working

[Martin Bechev]

Hi Dominik,

Using the kendoGridMenuTemplate is the correct approach when the built-in filter menu needs to be customized. The SinglePopupService is required because several popups are opened (the first is for the filter menu and the second is for the DropDownList or any other dropdown). By default when the focus is charged the popup is closed. That is why we need to use the popup service and prevent the default closing.

The SinglePopupService must be imported in the constructor of the component where the logic for the custom filtering is implemented.

private popupSubscription: Subscription;

    constructor(private element: ElementRef, private popupService: SinglePopupService) {

        // Handle the service onClose event and prevent the menu from closing when the datepickers are still active.
        this.popupSubscription = popupService.onClose.subscribe((e: PopupCloseEvent) => {
            if (document.activeElement && closest(document.activeElement as HTMLElement,
                node => node === this.element.nativeElement || (String(node.className).indexOf('date-range-filter') >= 0))) {
                e.preventDefault();
            }
        });
    }

https://stackblitz.com/edit/angular-mfvmyo

In case some additional logic needs to be executed when the entire filter menu is closed, handle the filterChange or dataStateChange Grid event

I hope the provided information helps. Let me know how it goes.

[Dominik]

filterChange and dataStateChange is called only on apply filter, not on just close popup :)

btw. single popup injection token still not works  so its a bug;)

[Yanmario]

Hi Dominik,

In our testing, the single popup service is working without any errors. If you suspect that there is a bug, please provide us with details, a runnable example, and steps to reproduce the issue. This can also be directly logged in our public GitHub repository:

https://github.com/telerik/kendo-angular/issues

Regards,
Yanmario
Progress Telerik