Prevent from click outside editing row

[James Evangelist]

Hi,

i've got a question. Is there any way to prevent a user to click outside current editing row? User can only edit row by selecting one and clicking 'Edit' button on the toolbar. If he wants to save changes he can click on 'Update' button (also on toolbar). While editing, user can click outside editing row and then edit mode is turning off - I want to prevent this situation.

[Thavasianand Sankaranarayanan]

Hi James, 

Greeting from Syncfusion. 

We have analyzed your requirement and we can achieve your requirement using the toolbarClick, actionBegin event of Grid. Please refer the below code example and sample for more information. 

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

    <e-columns> 

        . . . . . 

    </e-columns> 

</ejs-grid> 

toolbarClick(args){ 

  if(args.item.text==="Update"){ 

    this.flag = false; 

  } 

} 

actionBegin(args: any) :void { 

    if(args.requestType ==='save'){ 

        // when apply args.cancel as true then it prevent from save action 

        args.cancel = (this.flag) ? true : false; 

        this.flag = true; 

    } 

} 

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

Refer the help documentation. 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#actionbegin 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#toolbarclick 

Regards, 

Thavasianand S. 

[James Evangelist]

This solution works great! Thanks for help.

[Thavasianand Sankaranarayanan]

Hi James, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.