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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Passing param to template

Thread ID:

Created:

Updated:

Platform:

Replies:

144038 Apr 15,2019 08:47 PM UTC Oct 21,2020 03:43 PM UTC Vue 8
loading
Tags: Schedule
Marco
Asked On April 15, 2019 08:54 PM UTC


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 [Syncfusion]
Replied On April 16, 2019 06:01 AM UTC

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.  
 
Regards,  
Karthi  
 


Georgi Panayotov
Replied On April 22, 2019 11:11 PM UTC

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
Replied On April 23, 2019 05:37 AM UTC

Man, thank you :DDD

Nevitha Ravi [Syncfusion]
Replied On April 23, 2019 01:52 PM UTC

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
Replied On April 23, 2019 06:16 PM UTC

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

Nevitha Ravi [Syncfusion]
Replied On April 24, 2019 11:27 AM UTC

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. 

<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
Replied On October 20, 2020 11:48 AM UTC

Where did you find the solution or the properties that we can pass in the template?
The documentation says nothing about it:

Nevitha Ravi [Syncfusion]
Replied On October 21, 2020 03:43 PM UTC

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. 
  
Regards, 
Nevitha 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon