Angular Ag-Grid Date Cell Editor

Question

I'm working with ag-grid and have columns that are dates. I need to be able to edit the cell with a date picker like they have in there docs if you click the code tab in the preview you can I'm doing the same thing, but I can't get mine to work. I get this error,

ERROR Error: No component factory found for Datepicker. Did you add it to @NgModule.entryComponents?

Here's my code even tho its pretty much the same.

html

        <ag-grid-angular #iaAuditTrackingGrid style="width: 100%; height: 100%;" class="ag-theme-balham ag-font-style"
                         [rowData]="GridRows"
                         [columnDefs]="GridCols"
                         [components]="Components"
                         rowSelection="single"
                         (gridReady)="onGridReady($event);"
                         (rowSelected)="onRowSelected($event);"
                         (cellValueChanged)="onCellValueChanged($event);">
        </ag-grid-angular>

component.ts


import { Component, ViewChild } from "@angular/core";
import { Subscription } from "rxjs";

declare var $: any;

@Component({
    selector: 'grid-component',
    templateUrl: './grid.component.html'
})

export class IAAuditTrackingComponent {

    @ViewChild('iaAuditTrackingGrid') audTrackGrid: any;
    public GridApi: any;
    public GridRows: any[] = [];
    public GridCols: AgGridCol[] = [];
    public GridColDefs: AgGridColDef[] = [];

    public Components = {
        /* custom cell editor component*/
        datePicker: this.getDatePicker()
    };


   public getDatePicker() {
        function Datepicker() { }
        Datepicker.prototype.init = function (params) {
            this.eInput = document.createElement("input");
            this.eInput.value = params.value;
            $(this.eInput).datepicker({ dateFormat: "dd/mm/yy" });
        };
        Datepicker.prototype.getGui = function () {
            return this.eInput;
        };
        Datepicker.prototype.afterGuiAttached = function () {
            this.eInput.focus();
            this.eInput.select();
        };
        Datepicker.prototype.getValue = function () {
            return this.eInput.value;
        };
        Datepicker.prototype.destroy = function () { };
        Datepicker.prototype.isPopup = function () {
            return false;
        };
        return Datepicker;
    }

Module.ts


@NgModule({
    declarations: [
        IAAuditTrackingComponent,
        NumericEditorComponent
    ],
    providers: [
        IAAuditTrackingService
    ],
    imports: [
        SharedModule,
        BrowserModule,
        NgbModule,
        FormsModule,
        AgGridModule.withComponents([])
    ]
})

Is there something I'm missing here? Thank you for your time!

try to use DatePicker component inside declarations: [ IAAuditTrackingComponent, NumericEditorComponent, DatePicker ], — MukulSharma, Oct 23 '19 at 03:38
you may check - https://stackoverflow.com/a/46990483/6426569 — MukulSharma, Oct 23 '19 at 03:44

score 2 · Answer 1 · answered Oct 23 '19 at 01:39

2

You should add components that are created dynamically to @NgModule.entryComponents as it's mentioned in the error. So you can add this to your @NgModule decorator:

@NgModule({
    //...
    entryComponents: [
        Datepicker
    ]
})

answered Oct 23 '19 at 01:39

Anna

2,988
3
15
29

When I do this, can't put `import { DatePicker } from '...'` because it made inside the other component. – Jacob Loncar Oct 23 '19 at 16:25
Try to put it under app.module – Anna Oct 23 '19 at 23:43

Angular Ag-Grid Date Cell Editor

1 Answers1