We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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?


1 Reply 1 reply marked as answer

PG Praveenkumar Gajendiran Syncfusion Team March 10, 2021 03:19 AM

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 


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon