DialogBox - ref not store in $refs

[Piedrot Gyzmo]

Hi Syncfusion,

I'm having an issue on using the DialogBox. From this page - link - we are supposed to use ref='dialogboxname' to get it later with this->$refs.
But in my case the DialogBox doesn't himself as ref for a reason i don't get. I'm already using this ref attribute on another component, treegrid, and it works fine.

I'm using the DialogBox in a vue component with this content :

<template>
    <div>
        <ejs-dialog
            ref="dlgBox"
            :header='header'
            :target='target'
            :width='width'
            :buttons='buttons'
            :content='content'
            :open="dlgOpen"
            :close="dlgClose">
        </ejs-dialog>
    </div>
</template>
<script>
import Vue from "vue";
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);
export default {
    name: "DialogBox",
    data: function() {
        return {
            /**
             * Configuration de la dialog box
             */
            target: "#app",
            width: '335px',

            header: 'Suppression',
            content: 'Êtes-vous sur de supprimer les familles de matières ?',
            buttons: [{
                click: this.dlgButtonClick,
                buttonModel: {
                    content: 'Valider',
                    isPrimary: true
                }},
                {
                    click: this.dlgButtonClick,
                    buttonModel: {
                        content: 'Annuler'
                    }
                }
            ],
        }
    },
    methods: {
        dlgClose: function() {
            document.getElementById('dlgbtn').style.display = '';
        },
        dlgOpen: function() {
            document.getElementById('dlgbtn').style.display = 'none';
        },
        dlgButtonClick: function() {
            this.$refs.dlgBox.hide();
        },
    }
}
</script>
<style scoped>
</style>

If i remove the visible attribute, the DialogBox appears, so it's properly loaded. But there is no way to get this component register as the treegrid component.

So am i doing wrong or what am i missing ?

Any help would be appreciate, than you !

[Indrajith Srinivasan]

Hi Piedrot, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query and prepared a sample with a shared code-block. We are able to access the dialog (dlgBox) instance through $refs. When run your code snippet, we didn’t experience any issue with showing/hiding a dialog.  

 

Please find a corresponding sample: https://codesandbox.io/s/vue-template-forked-vkrkz?file=/src/App.vue 

 

Can you please check the above sample and let us know whether we are missing any codes to reproduce the reported issue? 

 

Regards, 

Indrajith 

[Piedrot Gyzmo]

Hi Indrajith,

I started over, and it know works.

One of the thing that change a bit from your example is that the DialogBox i have created has been in a DialogBox.vue component.

So when i was doing the import in the "main" component, i was adding a <DialogBox /> tag but without using the ref attribute.
And that where it was goind wrong, cause the main component wasn't able to use the ref declare in the DialogBox.vue component.
In  order to work i had to add a ref attribute on <DialogBox ref="dialogBox" />, like so.
So now the main component is able to use the this->$refs->dialobBox, as mention in the example.

Anyway, thank you very much for your answer and time !

[Indrajith Srinivasan]

Hi Piedrot,

Thanks for the update,

We are glad that your reported issue is resolved. Please get back to us if you need any further assistance.

Regards,
Indrajith