How to restrict adding rows on tabbing last row and column in ej2 syncfusion grid

[Lahari Navudu]

Hi Team,

In an ej2-syncfusion grid I am using batch mode, On tabbing on last row last column a new row is getting added how to restrict adding row on tab. I am using the below code snippet.

Html file:

<ejs-grid *ngIf="styleDefList" id='styleDefinitionGrid' #styleDefinitionGrid [locale]='locale'

      [editSettings]='editSettings' [allowSorting]='true' [allowResizing]='true'

      [dataSource]='styleDefList?.data?.items' [toolbar]='toolbar' [rowHeight]='30' (actionBegin)="actionBegin($event)"

      (toolbarClick)='onGridToolbarClick($event)' [height]="windowHeight" [allowSelection]='true' [columns]="columns"

      [selectionSettings]='selectionSettings' (dataBound)="onGridDataBound($event)" [allowExcelExport]='true'

      [allowFiltering]='true' (excelExportComplete)='onGridExcelExportComplete()' [allowPaging]='true'

      (cellEdit)=cellEdit($event) [pageSettings]='pageSettings' (actionComplete)="actionComplete($event)"

      [filterSettings]='filterOption' [searchSettings]='searchOptions' (headerCellInfo)="headerCellInfo($event)"

      [showColumnChooser]='true' [allowReordering]='true' (rowDataBound)="rowDataBound($event)"

      (excelQueryCellInfo)='exportQueryCellInfo($event)' (recordDoubleClick)="doubleClick($event)"

      (cellSelected)="gridCellSelected($event)" (cellDeselected)="gridCellSelected($event)"

      (beforeBatchSave)="beforeBatchSave($event)" (beforeBatchAdd)="beforeBatchAdd($event)" (cellSaved)="cellSaved($event)" (rowSelecting)='rowSelecting($event)'>

    </ejs-grid>

Ts file:

 beforeBatchAdd(args: any) {

    if (event.action == "tab") {

      args.cancel = true;

    }

   

  }

While using this code its not working and giving some error like event is deprecated.

Can you please provide me a solution for this issue.

Thanks,

Lahari Navudu

[Pavithra Subramaniyam]

Hi Lahari, 

 

Thanks for contacting Syncfusion support. 

 

You can achieve your requirement by using canceling the add action inside the “beforeBatchAdd” event. Please refer to the below code example and sample link for more information. 

 

@Component({ 

  selector: 'app-root', 

  template: `<ejs-grid #grid id="Batchgrid" [dataSource]="data" allowPaging="true" [editSettings]="editSettings"  

(beforeBatchAdd)="beforeBatchAdd($event)" (cellEdit)="cellEdit($event)" [toolbar]="toolbar"> 

  .  .  . 

  </ejs-grid>` 

}) 

export class AppComponent { 

  .  .  . 

  beforeBatchAdd(args) { 

    if (this.flag == true) { 

      args.cancel = true; 

      this.flag = false; 

    } 

  } 

  cellEdit(args) { 

    let batchChanges: any = this.grid.getBatchChanges(); 

    // based on the last row and column 

    if (parseInt(args.row.getAttribute('aria-rowindex')) == this.grid.currentViewData.length + batchChanges.addedRecords.length 

      - batchChanges.deletedRecords.length - 1 && args.columnName == 'ShipCountry' ) 

      this.flag = true; 

  } 

} 

 

 

 

API        : https://ej2.syncfusion.com/documentation/api/grid/#beforebatchadd 

 

Sample : https://stackblitz.com/edit/angular-wx9zwn?file=app.component.ts 

 

Please get back to us if you need further assistance on this. 

 

Regards, 

Pavithra S