angularinfragisticsignite-ui-angularigx-grid

Batch editing is not a known 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: error-batch

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>

P.S. I use Angular 12.


Solution

  • Your code looks good. Please note, the batchEditing was introduced in IgniteUI for Angular 12.1.0. Check if your version of IgniteUI is newer or equal to 12.1.0. If you have older version you can update with ng update as shown in the Update Guide.