1. Home
  2. Forum
  3. Vue
  4. Get data object of dialog's content template

Get data object of dialog's content template

Hi,

is it possible to retrieve the data object of the content template for a dialog?
Image I have

<ejs-dialog ref="addDialog" :content="contentTemplate" :buttons="buttons"></ejs-dialog>

buttons: any[] = [
     { click: this.addEntry, buttonModel:{ content: 'Add' }  }

]

contentTemplate(){
     return {
          template: CustomComponent
     }
}

addEntry(args: any){
     //Get data from dialog and save it!
}



I thought about using the event-bus system, but the CustomComponent does not have any action, it just contains simple data for binding them to the controls.
Two-Way binding  the data will not work, because I have a cancel option and I don't want to remember and reset the data for such a simple task. Furthermore, independent views could be updated in real time which is a bad user experience.


As I have a reference to the dialog, it would be passed if I could this via the dialog ref-object.

Querying the DOM as supposed in your example within the doc is really not a good option in my opinion and I want to avoid that. Adding selectors for each control seems a bittle outstanding and will affect performance heavily. There should be a way of getting the data property of the template component. Is there a way to do so?

3 Replies 1 reply marked as answer
IS Indrajith Srinivasan Syncfusion Team October 26, 2020 08:15 AM UTC

Hi Dave, 
 
Greetings from Syncfusion support, 
 
We have validated your reported query. Yes, you can get the data object of the Dialog content without using the component ref. Check the below sample and reference links for reference. 
 
 
addEntry: function () { 
      console.log(this.$data.contentTemplate); 
}, 
 
 
 
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith 


Marked as answer
DA Dave October 26, 2020 09:37 AM UTC

Hi,

thanks for your response. I'm using typescript, so the "this" reference will be different. This refers to the parent component in that case, and the vue component does not have a property called vm.
Either the $data property of the component nor the dialog has a property called "contentTemplate".

IS Indrajith Srinivasan Syncfusion Team October 27, 2020 12:42 PM UTC

Hi Dave, 
 
Good day to you, 
 
We have validated your reported queries, 
 
Query 1: “I'm using typescript, so the "this" reference will be different. This refers to the parent component in that case, and the vue component does not have a property called vm.” 
 
You can bind(this) with the button click action call to get the Vue instance. Also, vm is not a property it is used to denote the vue instance in the page. Check the below code blocks for reference. 
 
 
<ejs-button id="modalBtn" v-on:click.native="btnClick.bind(this)">Open Dialog</ejs-button> 
 
 
methods: { 
    btnClick: function () { 
      this.$refs.templateDialog.show(); 
    }, 
 
   // Get the object instances here. 
    addEntry: function () { 
      console.log(this.$data.contentTemplate); 
    }, 
  }, 
 
Query 2: “Either the $data property of the component nor the dialog has a property called "contentTemplate".” 
 
With the already shared example the dialog content is passed, using the contentTemplate function which returns the template. Hence used the variable to get the dialog content as an object. 
 
 
<template> 
  <div> 
      <!-- Render Dialog --> 
      <ejs-dialog 
        :content="contentTemplate" 
      ></ejs-dialog> 
    </div> 
  </div> 
</template> 
 
var contentTemplateVue = Vue.component("demo2", { 
  template: 
    '<div><div class="dialogContent"> <span class="dialogText">Greetings Nancy! When will you share me the source files of the project?</span></div></div>', 
  data() { 
    return { 
      data: {}, 
    }; 
  }, 
}); 
 
export default { 
  data: function () { 
    return { 
      contentTemplate: function () { 
        return { template: contentTemplateVue }; 
      }, 
    }; 
  } 
} 
} 
 
Regards, 
Indrajith 


Loader.
Up arrow icon