Passing param to template

[Marco]

import WorkScheduleEdit from './WorkScheduleEdit.vue'

editorTemplate: function(e) {

         return {

                 template: WorkScheduleEdit,

         };

   },

          

All works, but!

I have data  object - 

1. I need to pass data or values into my TEMPLATE but dont know how I can do it

[Karthigeyan Krishnamurthi]

Hi Marco,  

  

Greetings from Syncfusion. 

 

We have logged the below bug report to access the field values of an event or cell within the editor template design. The fix will be included in JS2 weekly release on April 23, 2019.  

https://www.syncfusion.com/feedback/5332/need-to-access-the-cell-or-event-details-within-the-event-editor-template  

 

Regards,  

Karthi  

 

[Georgi Panayotov]

We had same problem. The solution we found was to extend the template:

editorTemplate: function(e) {

         let self = this;        

         return {

                 template: {

                      extends: WorkScheduleEdit,,

                      propsData: {

                            dataValue: self.valueToTemplate

                      }

         };

   },

[Marco]

Man, thank you :DDD

[Nevitha Ravi]

Hi Marco, 

  

We are happy that your issue has been resolved. Please let us know if you need to any further assistance. 

  

Regards,
Nevitha 

[Marco]

I need assistance, how pass computed data to template? :((((

[Nevitha Ravi]

Hi Marco, 

Thanks for your update. 

Now we can access the field values of cell/event within editor template which has been included in our latest package 17.1.42. And we have prepared sample for your reference to access the data which can be downloaded from the following link. 

http://www.syncfusion.com/downloads/support/forum/144038/ze/EditorTemplateArgs1674730203  

<template> 

  <table class="custom-event-editor" width="100%" cellpadding="5"> 

    <tbody> 

      <tr id="summaryRow"> 

        <td class="e-textlabel">Summary</td> 

        <td colspan="4"> 

          <input 

            id="Subject" 

            class="e-field e-input" 

            type="text" 

            :value="data.Subject" 

            name="Subject" 

            style="width: 100%" 

          > 

        </td> 

      </tr> 

      <tr id="eventTypeRow"> 

        <td class="e-textlabel">Status</td> 

        <td colspan="4"> 

          <ejs-dropdownlist 

            id="EventType" 

            name="EventType" 

            class="e-field" 

            :value="data.Status" 

            placeholder="Choose status" 

            :dataSource="eventType" 

          ></ejs-dropdownlist> 

        </td> 

      </tr> 

      <tr id="fromRow"> 

        <td class="e-textlabel">From</td> 

        <td colspan="4"> 

          <ejs-datetimepicker 

            id="StartTime" 

            class="e-field" 

            :value="dateParser(data.startTime || data.StartTime)" 

            name="StartTime" 

          ></ejs-datetimepicker> 

        </td> 

      </tr> 

      <tr id="toRow"> 

        <td class="e-textlabel">To</td> 

        <td colspan="4"> 

          <ejs-datetimepicker 

            id="EndTime" 

            class="e-field" 

            :value="dateParser(data.endTime || data.EndTime)" 

            name="EndTime" 

          ></ejs-datetimepicker> 

        </td> 

      </tr> 

      <tr id="reasonRow"> 

        <td class="e-textlabel">Reason</td> 

        <td colspan="4"> 

          <textarea 

            id="Description" 

            class="e-field e-input" 

            :value="data.Description" 

            name="Description" 

            rows="3" 

            cols="50" 

            style="width: 100%; height: 60px !important; resize: vertical" 

          ></textarea> 

        </td> 

      </tr> 

    </tbody> 

  </table> 

</template> 

 

<script> 

import Vue from "vue"; 

import { DateTimePickerPlugin } from "@syncfusion/ej2-vue-calendars"; 

import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns"; 

Vue.use(DropDownListPlugin); 

Vue.use(DateTimePickerPlugin); 

 

export default { 

  name: "EventTemplate", 

  data() { 

    return { 

      eventType: ["New", "Confirmed", "Rejected"], 

      data: {} 

    }; 

  }, 

  methods: { 

    dateParser: function(data) { 

      return new Date(data); 

    } 

  } 

}; 

</script> 

Regards, 

Nevitha. 

[Dave]

Where did you find the solution or the properties that we can pass in the template?

The documentation says nothing about it:

Template Doc

[Nevitha Ravi]

Hi Dave, 

  

Greetings from Syncfusion support. 

  

By default we can access all the appointment fields in scheduler datasource, please find the refer the following UG link. 

https://ej2.syncfusion.com/vue/documentation/schedule/editor-template/#customizing-event-editor-using-template  

  

Regards, 

Nevitha 

[Isabelle Fuchs]

i would need neraly the same - just for the Tooltip Template - can you help me how i could bring the datat fom the event - to the Tooltip Template

thanks

Isabelle

[Nevitha Ravi]

Hi Isabelle, 

Greetings from Syncfusion Support. 

Please refer the following online demo to show data from events in tooltip template and get back to us if you need any assistance. 

https://ej2.syncfusion.com/vue/demos/#/material/schedule/tooltip.html  

Regards, 

Nevitha