How to close a dialog shown with DialogUtility when the user clicks OK ?

[Silvio]

Can anyone help me ?

I'm using DialogUtility to show a confirm to the user and I'm using the example in the documentation:

https://ej2.syncfusion.com/vue/documentation/dialog/how-to/render-a-dialog-using-utility-functions/

The code I've used is this:

<template>
    <div>
        <center><ejs-button ref='button' id="dialogbtn" cssClass="e-info" v-on:click.native="dialogBtnClick">Open Confirm Dialog</ejs-button></center>
    </div>
</template>
<script>
import Vue from 'vue';
import { DialogUtility } from '@syncfusion/ej2-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);

export default {
    data: function() {
        return { }
    },
    methods: {
        dialogBtnClick: function() {
            //  Initialize and render Confirm dialog with options
            DialogUtility.confirm({
                title: ' Confirmation Dialog',
                content: "This is a Confirmation Dialog!",
                okButton: {  text: 'OK', click: this.okClick },
                cancelButton: {  text: 'Cancel', click: this.cancelClick },
                showCloseIcon: true,
                closeOnEscape: true,
                animationSettings: { effect: 'Zoom' }
            });
        },
       okClick: function() {
            alert('you clicked OK button');
        },
        cancelClick: function() {
            alert('you clicked Cancel button');
        }
    }
}
</script>
<style>
    @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

Everything works fine but I have a little problem.

If I set the click method for the ok button, the method is correctly called after the click but the dialog does not close itself (without setting this method instead it closes).
So, how can set che click method and also close the dialog automatically when the button is clicked?

Thank you 

[Indrajith Srinivasan]

Hi Silvio, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. By default, the dialog will be closed only when calling the hide method or using the visible property. The dialog button click action itself will not close the dialog. You can hide the utility dialog by assigning the DialogUtility to a variable and call the hide method of the Dialog. We have also prepared a sample that tries to meet your requirements. 

 

API link: https://ej2.syncfusion.com/vue/documentation/api/dialog#hide 

 

Sample: https://codesandbox.io/s/vue-template-b1oco?file=/src/App.vue 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Silvio]

Thank you !

Too simple!

I didn't read in the documentation that this method returns the created form.

It should be nice to add this information, if really missing.

[Indrajith Srinivasan]

Hi Silvio,

Good day to you, 

 

Sure we will document this usage with Dialog Utility and will let you know once the documentation is published in the live site on or before our 2020 Volume 2 SP 1 release. 

 

Regards, 

Indrajith 

[Indrajith Srinivasan]

Hi Silvio,

We have documented the closing of dialog utility in our documentation and it is now available in the live site.

https://ej2.syncfusion.com/vue/documentation/dialog/dialog-utlility/#close-utility-dialog

Regards,
Indrajith