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?