We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Vue dialog content as a vue template

I have a hard time to figure out how to add some vue data in vue dialog content 
I want to make by own - totally custom dialog for vue grid edit. 

For example - I have showEdit method like this 


        let rowObj= this.$refs.Grid.ej2Instances.getRowObjectFromUID(closest(args.target, '.e-row').getAttribute('data-uid'));

        let data = rowObj.data;
        let dm = new DataManager({
                url: '/api/account/form_template/'+data.id,
                adaptor: new UrlAdaptor,
            }).executeQuery(new Query()).then((e) => {
              this.editedItem = e.result.data  // an array of data ex: {id:1, name:test,'price:123'}
               this.$refs.footerDialog.show(true); // show the dialog 


and footer dialog defined like this

 <ejs-dialog ref="footerDialog


How should I present my contentTemplate vue to be able to access editedItem in there? 
Is it even possible? 

contentTemplate example

 <v-text-field v-model ="editedItem.name"></v-text-field>
 <v-text-field v-model="editedItem.price"></v-text-field>


1 Reply

PO Prince Oliver Syncfusion Team March 26, 2019 04:38 PM UTC

Hi Oleg, 

Greetings from Syncfusion support. 

We have analyzed your requirement. Yes. It is possible to use Vue Dialog Content as a Vue template. We have assigned dataSource through beforeMount event through Vuex store and have updated the Dialog component content dynamically through button click. 

In above sample, we have covered the following things, 

  • Render the Dialog component and a Button component in App.vue page. Initially, hide the dialog component by disabling the visible property.
  • Axios post is triggered, when you click the button. After this post succeeded, we have passed the item into the child component(ItemList.vue) by setting data and also Dialog content is dynamically updated.
  • Now, Dialog content rendered with another vue component data.
  • We have used a child component as an HTML input element instead of using <v-text-field> tag.

Let us know if you need any further assistance on this. 


Live Chat Icon For mobile
Up arrow icon