This is a migrated thread and some comments may be shown as answers.

Custom Filter Menu with Popup

2 Answers 13 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Veronika
Top achievements
Rank 1
Veronika asked on 19 Apr 2021, 11:58 AM

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?


2 Answers, 1 is accepted

Sort by
0
Veronika
Top achievements
Rank 1
answered on 20 Apr 2021, 07:41 AM
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
0
Yanmario
Telerik team
answered on 21 Apr 2021, 09:53 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Veronika
Top achievements
Rank 1
Answers by
Veronika
Top achievements
Rank 1
Yanmario
Telerik team
Share this question
or