Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Silvia Ivanova
60
Please help: batchEditing isn't a know property of 'igx-grid
posted

I want to enable batch editing for a igx-grid to allow commitment of edited rows to a database. But I get the error: "NG8002: Can't bind to batchEditing since it isn't a know property of 'igx-grid'".

I already have IgxGridModule imported in app.modules.ts.
Why I get this error?

Here is my grid.

<igx-grid #grid1
[batchEditing]="true"
[data]="posts"
width="80%"
height="600px"
style="margin: auto"
[showToolbar]="true"
toolbarTitle="Cars"
[allowFiltering]="true"
[columnHiding]="true"
[hiddenColumnsText]="'hidden'"
[columnPinning]="true"
[pinnedColumnsText]="'pinned'"
[primaryKey]="'examplelotId'"
[rowEditable]="true">
<igx-grid-toolbar>
<igx-grid-toolbar-title>Example Table</igx-grid-toolbar-title>
</igx-grid-toolbar>

<igx-column field="examplelotId" dataType="number" header="LotId" [sortable]="true" [movable]="true"></igx-column>
<igx-column field="exampleproduction" header="Production" [sortable]="true" [movable]="true" [dataType]="'string'"></igx-column>
<igx-column field="exampledepartment" header="Department" dataType="string" [sortable]="true" [movable]="true">

</igx-column>

<igx-column width="100px" [filterable]="false">
<ng-template igxCell let-cell="cell">
<button igxButton="icon" (click)="removeRow($event, cell.cellID)">
<igx-icon>delete</igx-icon>
</button>
</ng-template>
</igx-column>
</igx-grid>

I use Angular 12.

Also I found information that the functions such as those below, are deprecated in the last version of ignite UI and Angular. What are the alternatives for the following functions:

[showToolbar]="true"
[allowFiltering]="true"
[columnHiding]="true"
[hiddenColumnsText]="'hidden'"
[columnPinning]="true"
[pinnedColumnsText]="'pinned'"
[primaryKey]

Please help me.

  • 640
    Offline posted

    Hello Silvia,

    Thank you for posting in our community.

    The batchEditing property of IgxGrid is a new addition in our product and can be used with 12.1.0 or newer version of Ignite UI for Angular. If you are using older version, you should provide IgxTransactionService in the component providers array to enable the batch editing:

    TYPESCRIPT

    @Component({
    providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }]
     

    Keep in mind that since each IgxGrid needs its own transaction service, when component has several IgxGrids defined in its body, each IgxGrid should be encapsulated in a component where transaction service should be provided. What I can suggest is creating a separate component which provides IgxTransactionService and using it as a wrapper for grids which you need to be with transactions service:

    TYPESCRIPT

    // transaction-service-provider.component.ts

import { Component } from "@angular/core";
import { IgxGridTransaction, IgxTransactionService } from "igniteui-angular";

@Component({
    providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
    selector: "app-grid-with-transactions",
    template: "<ng-content></ng-content>"
})

export class TransactionServiceProviderComponent { }
     

    HTML

    <!-- grid-batch-editing-sample.component.html -->

<app-transaction-service-provider>
    <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px"
        [rowEditable]="true">
        ...
    </igx-grid>
</app-transaction-service-provider>
     

    I created a small sample illustrating my suggestion, which you can find here. Please test it on your side and let me know whether you find it helpful.

     

    Regards,
    Viktor Kombov
    Entry Level Software Developer
    Infragistics, Inc.