Need to clear the popup dialogs for inline editing of grid

Question

Hello,We are using the Angular Grid to perform inline editing. We allow the user to change the data source they wish to show in the grid. The objects in the grid have the same structure, only the data is different. The inline editing works well. However the grid has a built-in popup dialog that appears if you click Edit or Delete without first selecting a row:This dialog is modal to the grid, but the controls above the grid that allow the user to change the data source are not included in the modal overlay. So the user can change the data source, and the modal overlay and popup do not disappear. Is there any way we can make them disappear? Failing that, if there were an event that we could know when a dialog has appeared and another when the user closes it, we can make our controls disabled between those two events.I have an example here: https://stackblitz.com/edit/angular-grid-edit-dialogs-persist?file=app.component.tsTo reproduce, load the application. Data set 1 will appear.Without selecting a row, click the Edit button in the grid toolbar.Click the "Order Data 2" button.The data source for the grid changes, but the popup remains.Desired result: any internal grid popups are cleared when the data source is changed.Please let me know if you have any questions.

Shalini Maragathavel · Accepted Answer

Hi Michael, 

Thanks for the contacting syncfusion support. 

You can close the edit alert popup while changing the datasource to the Grid by using hide method of dialog as demonstrated in the below code snippet, 
 




public setData1() { 
    var alertdlg = this.grid.element.querySelector(".e-popup-open"); 
    if (alertdlg) { 
      (alertdlg as any).ej2_instances[0].hide();   
    } 
    this.data = orderDataSource; 
  } 
 
  public setData2() { 
    var alertdlg = this.grid.element.querySelector(".e-popup-open"); 
    if (alertdlg) { 
      (alertdlg as any).ej2_instances[0].hide(); 
    } 
    this.data = orderDataSource2; 
  } 


We have modified your sample based on this for your reference. You can find it below 
Sample : https://stackblitz.com/edit/angular-grid-edit-dialogs-persist-zwke9p?file=app.component.ts Let us know if you have any concerns. 


Regards,Shalini M.

Michael Evans · Answer

Thank you, this worked out great. Appreciate the quick response!

Shalini Maragathavel · Answer

Hi Michael,We are happy to hear that the provided solution resolved your query. Please get back to us if you need further assistance.Regards,Shalini M