How to auto close the dialog using DialogUtility ?

[lorryl]

I am using the following code, when I click ok  or cancel button, the dialog doesnot close auto ?  What should I do ?

  showConfirm(content: any, title?: string, okCallback?: any, cancelCallback?: any) {

    let tempCancel = function () {  };

    if (cancelCallback) {

      tempCancel = cancelCallback;

    }

    DialogUtility.confirm({

      title: title,

      content: content,

      okButton: { text: 'OK', click: okCallback.bind(this) },

      cancelButton: { text: 'Cancel', click: tempCancel.bind(this) },

      showCloseIcon: true,

      closeOnEscape: true

    });

  }

[Prince Oliver]

Hi Lorryl, 

Thank you for contacting Syncfusion support. 

You can close the dialog by call the dialog’s hide method. Kindly refer to the following code snippet 

 

[app.component.ts] 

    private BtnClick(): void { 

        // render confirm utility dialog 

        this.UtilComponent = DialogUtility.confirm({ 

            title: ' Confirmation Dialog', 

            content: "This is a Confirmation Dialog!", 

            // bind okClick function to ok button’s click event 

            okButton: {  text: 'OK', click: this.okClick.bind(this) }, 

            // bind cancelClick function to cancel button’s click event 

            cancelButton: {  text: 'Cancel', click: this.cancelClick.bind(this)}, 

            showCloseIcon: true 

        }); 

    } 

    private okClick(args): void { 

        // to hide confirm Dialog when click on the ok button. 

        this.UtilComponent.hide(); 

    } 

 

We have attached a sample for your reference, please find the sample at the following location: https://stackblitz.com/edit/angular-a18qxv-xy8njt  

 

To know more about dialog with utility functions, please refer the following UG documentation link: https://ej2.syncfusion.com/angular/documentation/dialog/how-to#render-a-dialog-using-utility-functions 

Please let us know if you require any further assistance on this. 

Regards, 

Prince 

[lorryl]

  Thanks, that's really helped.

Another question:

How to set dialog's ok and cancel button language?

I set follow code, only close language is worked, the ok and cancel button language not work.

 L10n.load({
      'eng': {
        'dialog': {
          'close': 'Close',
          'cancel': 'Cancel',
          'ok': 'OK1'
        },
        'button': {
          'cancel': 'Cancel',
          'ok': 'OK1'
        }
      },
      'cht': {
        'dialog': {
          'close': '关闭111',
          'cancel': '取消',
          'ok': 'OK1'
        },
        'button': {
          'cancel': '取消',
          'ok': 'OK1'
        }
      },
      'chs': {
        'dialog': {
          'close': '关闭',
          'cancel': '取消',
          'ok': 'OK1'
        },
        'button': {
          'cancel': '取消',
          'ok': 'OK1'
        }
      },
    });

[Prince Oliver]

Hi Lorryl, 

Thank you for your update. 

Currently we don’t have an option for localize the footer button text in the Dialog component. But we can achieve your requirement by updating the button text dynamically. Kindly refer to the following code snippet. 

// To change the dialog button text value after localization changed dynamically in drop-down. 

public changeButtonText(locale: string): void { 

    let okButton: any; let cancelButton: any 

    if (!isNullOrUndefined(this.UtilComponent.getButtons())) { 

        okButton = this.UtilComponent.getButtons()[0]; 

        cancelButton = this.UtilComponent.getButtons()[1]; 

    } 

    this.getLocaleText(locale); 

    okButton.content = this.okButtonText; 

    cancelButton.content = this.cancelButtonText; 

} 

 

// Method to assign the buttonText based on localization 

public getLocaleText(locale: string) { 

    switch (locale) { 

        case 'en-US': 

            this.okButtonText = 'Ok'; 

            this.cancelButtonText = 'Cancel'; 

            break; 

        case 'fr-BE': 

            this.okButtonText = "D'accord", 

                this.cancelButtonText = 'Fermer'; 

            break; 

        case 'zh-CN': 

            this.okButtonText = "好"; 

            this.cancelButtonText = '關'; 

            break; 

    } 

} 

 

ngOnInit() { 

    // Load French culture for Dialog close button tooltip text 

    L10n.load({ 

        'fr-BE': { 

            'dialog': { 

                'close': "Fermer" 

            } 

        }, 

        'zh-CN': { 

            'dialog': { 

                'close': "關" 

            } 

        } 

    }); 

    // Pass initial localization value 

    this.getLocaleText('en-US'); 

} 

We have attached a sample for your reference, please find the sample at the following location: https://stackblitz.com/edit/angular-mzx4vk-twqq3v 

Regards, 

Prince