Please help: batchEditing isn't a know property of 'igx-grid

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.

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: ""
})

export class TransactionServiceProviderComponent { }

 

HTML

    
        ...
    

 

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.