Press enter the dialog auto close

Question

I am using syncfuson angular dialog, There is a filter bar in right grid, when press enter key, I want to search the right grid, but the dialog closed, what should I do for this issue ? It seems that filter search is conflicted with submit button. Do I must use dialog footer template for submit button, not buttons property?

Karthikeyan Viswanathan · Answer

Hi lorryl, 
 
Thanks for contacting Syncfusion support. 
 
Query 1: I am using syncfusion angular dialog, There is a filter bar in right grid, when press enter key, I want to search the right grid, but the dialog closed, what should I do for this issue ? 

We were unable to find out the exact root cause of this issue. Also, we suspect that the issue is raised due to handle the dialog’s close action in keydown event in your application. So, please check your application whether the dialog hide is handled in key action or not. 

Still, you have an issue then please share the below details. It will help us to provide a solution at earlier. 

Share the issue reproducing sample if possible.
Share the code snippet which it is help to reproduce this issue.

Query 2: Do I must use dialog footer template for submit button, not buttons property? 
Yes, currently we are not having an option to provide the footer button as submit type. We will consider this as an improvement in our side and it will be included in our upcoming main release for volume 3, 2018 SP1 release. 
 
As a workaround, you can achieve your requirement  by using footer template API. 

Refer the UG Documentation link: https://ej2.syncfusion.com/angular/documentation/dialog/api-dialogComponent.html#footertemplate 

Refer the sample link: https://stackblitz.com/edit/angular-k2glub-d1kd92?file=normal-edit.html 
 
Regards, 
Karthikeyan V.

lorryl · Answer

Hi, I uploaded a demo, the dialog is a list form with a grid list only. like the below picture, the dialog are auto closed when I press enter for filtering grid.Attachment: demodialog_b9b3fee3.rar

Karthikeyan Viswanathan · Answer

Hi lorryl, 
 
Thanks for contacting Syncfusion support. 
 
As per standard behavior, while pressing enter from input field inside dialog, primary button action will be called. 

To overcome this, we suggest the below possible solutions. 
 
(i).  Based on the conditions, you can set args.cancel as true in dialog beforeClose event. This will restrict to close the dialog. 





public beforeDialogClose = function (args: any): void { 
    if ((document.getElementById('VoucherNo_filterBarcell') as HTMLInputElement).value === '') { 
         args.cancel = true 
    } 
} 
 
 
(ii). Else, you can change the footer button as non-primary button. 
 




public buttons: Object = [ 
    { 
      'click': this.hideDialog.bind(this), 
      buttonModel: { 
        content: 'OK', 
        // isPrimary: true    // Remove this configuration 
      } 
    }, 
    { 
      'click': this.hideDialog.bind(this), 
      buttonModel: { 
        content: 'Cancel' 
      } 
    } 
]; 
 

Refer the sample: https://stackblitz.com/edit/angular-rzpvj8?file=src%2Fapp%2Fapp.component.html 
 
 
Regards, 
Karthikeyan V.

lorryl · Answer

If I remove the code "isPrimary = true", the ok button will no color. Any idear ?

Karthikeyan Viswanathan · Answer

Hi lorryl, Based on your scenario, you can achieve this color changes by using cssClass property. Please refer the below code example:

 
public buttons: Object = [ 
    { 
      'click': this.hideDialog.bind(this), 
      // Accessing button component properties by buttonModel property 
      buttonModel: { 
        content: 'OK', 
        cssClass: 'e-primary' 
      } 
    }, 
    { 
      'click': this.hideDialog.bind(this), 
      buttonModel: { 
        content: 'Cancel' 
      } 
    } 
  ];

Sample link: https://stackblitz.com/edit/angular-rzpvj8?file=src%2Fapp%2Fapp.component.ts Regards, Karthikeyan V.

lorryl · Answer

It's very helpful, thank you man.

Karthikeyan Viswanathan · Answer

Hi lorryl, 
 
Thanks for the update. 
 
We are glad to hear that your issue has been resolved. 
 
Regards, 
Karthikeyan V.