Remove focus on edit complete

[Dileep gagan R]

Hi,

We have a batch add functionality of the grid, here last column of the grid is default updated. The thing is if i edit all the fields and click outside row getting added which is fine.

But when user clicks on cancel button and confirmation dialog comes in and user clicks on "No" , focus is moved back to the last cell of the grid, which we do not want. how can we remove the focus of the cell.

Things we tried, on cellsave event as follows and it did not work. Kindly suggest.

 if (e.cell.cellIndex == this.grid.columns.length - 1) {

      this.grid.clearSelection();

      e.cell.previousElementSibling.nextElementSibling.classList.remove('e-focus');

      e.cell.previousElementSibling.nextSibling.classList.remove('e-focus');

      e.cell.firstChild.parentElement.classList.remove('e-focus');

      e.cell.firstChild.parentNode.classList.remove('e-focus');

      e.cell.classList.remove('e-focus');

    }

[Vignesh Sivagnanam]

Hi Dileep, 

Thanks for contacting Syncfusion support. 

Based on your query you need to remove focus of the cell when you click on “Ok” button in the confirmation dialog(Cancel the batch edit operation). By default in EJ2 Grid the last cell will be focused when the user cancel the  edit operation.  

If you want to remove the last focus, we suggest you to use the batchCancel event of EJ2 Grid. This event will be triggered when cancel the batch edit changes. In the batchCancel event, we removed the focus from the last cell and focus the grid element. 

For more information please refer the below code example and sample:  

<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (batchCancel)='batchCancel($event)'> 

            <e-columns> 

                -------------- 

            </e-columns> 

</ejs-grid> 

---------------------------------------------------------------- 

batchCancel(args: any) :void { 

      this.grid.clearSelection(); 

      var focusElement = this.grid.element.querySelectorAll(".e-focus")[0]; 

      focusElement.classList.remove("e-focus"); 

      this.grid.element.focus(); 

    } 

  

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

Document: https://ej2.syncfusion.com/angular/documentation/api/grid/#batchcancel 

Regards, 

Vignesh Sivagnanam 

[Dileep gagan R]

Hi Dileep, 

Thanks for contacting Syncfusion support. 

Based on your query you need to remove focus of the cell when you click on “Ok” button in the confirmation dialog(Cancel the batch edit operation). By default in EJ2 Grid the last cell will be focused when the user cancel the  edit operation.  

If you want to remove the last focus, we suggest you to use the batchCancel event of EJ2 Grid. This event will be triggered when cancel the batch edit changes. In the batchCancel event, we removed the focus from the last cell and focus the grid element. 

For more information please refer the below code example and sample:  

<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (batchCancel)='batchCancel($event)'> 

            <e-columns> 

                -------------- 

            </e-columns> 

</ejs-grid> 

---------------------------------------------------------------- 

batchCancel(args: any) :void { 

      this.grid.clearSelection(); 

      var focusElement = this.grid.element.querySelectorAll(".e-focus")[0]; 

      focusElement.classList.remove("e-focus"); 

      this.grid.element.focus(); 

    } 

  

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

Document: https://ej2.syncfusion.com/angular/documentation/api/grid/#batchcancel 

Regards, 

Vignesh Sivagnanam 

Thanks for the response, but it doesn't work in a scenario where user clicks on cancel and in confirmation dialog clicks "No". Kindly suggest.

[Vignesh Sivagnanam]

Hi Dileep, 

Thanks for the update 

In EJ2 Grid Confirmation dialog we only have “Ok” and “Cancel” button. Please find the below screenshot, 

But in your update you have mentioned that you need a solution when clicks on “No” button. So, please share the video demonstration of your requirement which will help us to provide the prompt solution. 

Screenshot for your reference: 

 

Regards, 

Vignesh Sivagnanam