How to cancel the selection of first record while adding a new record in Angular Grid

[lorryl]

Hi,

demo link:

https://ej2.syncfusion.com/angular/demos/#/material/grid/normal-edit

step:

1. add a row in the bottom

2. after click update, auto select the first record? How to cancel select the first reocrd?

[Praveenkumar Gajendiran]

Hi Lorryl,

Greetings from Syncfusion support. 

Based on the query, we suspect that your requirement is to cancel the selection of first record while adding a new record in the Grid. You can achieve this using the actionBegin and rowSelecting events of the Grid component as demonstrated in the below code example and sample, 

Code Example: 

<ejs-grid #normalgrid id='Normalgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (rowSelecting)="rowSelecting($event)" (actionBegin)='actionBegin($event)'> 

            <e-columns> 

……………..
            </e-columns> 

        </ejs-grid> 

[app.component.ts] 

 

export class AppComponent { 

   

  public flag: Boolean; 

  actionBegin(args: any): void { // Grid’s actionBegin event – triggered when a Grid action is performed 

    if (args.requestType === "save" && args.action === "add") {  // A global flag is enabled when save action is performed 

      this.flag = true; 

    } 

  } 

  rowSelecting(args: any) {  // Grid’s rowSelecting event - triggered before row selection occurs. 

    if (this.flag) { 

      args.cancel = true;  // Here the row selection is prevented based on the flag variable by using args.cancel property 

      this.flag = false; 

    } 

  } 

} 

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

API Links: https://ej2.syncfusion.com/angular/documentation/api/grid/#actionbegin
                 https://ej2.syncfusion.com/angular/documentation/api/grid/#rowselecting
               
Please get back to us if you need further assistance.

Regards,
Praveenkumar G