Progress® Kendo® UI for Vue Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 25 Nov 2021 11:16 by ADMIN
DKD-dev
Created on: 24 Nov 2021 15:29
Category: Kendo UI® for Vue
Type: Bug Report
0
Scheduler: undefined templateArgs inside editorTemplate component when using composition API

Describe the bug
When defining a custom editor Template for the Scheduler(wrapper) component we define the value passed to the editable-template property as follows:

editorTemplate(data: any): any {
  return {
    template: EditEventTemplateComponent,
    templateArgs: Object.assign({}, data, {
      parentComponent: schedulerRef.value,
    }),
  };
}

With the above definition, in the EditEventTemplateComponent, the templateArgs cannot be accessed inside the setup function, when the Composition API is used. In the mean time, the templateArgs are accessible in the template of the EditEventTemplateComponent.

To Reproduce

  1. Open this project: sample-scheduler-composition-api.zip
    and install its NPM packaged(npm install)
  2. Start the project(npm run serve)
  3. Double click on one of the events available inside the Scheduler.
  4. Check the console of your browser
    -->

Expected behavior
The templateArgs should be accessible inside the setup function when using Composition API.

  • Possible workaround: Use the classic Options API instead. When we use the Options API, the templateArgs are accessible inside the mounted hook.
2 comments
ADMIN
Petar
Posted on: 25 Nov 2021 11:16

Hi DKD-dev,

Thank you for sharing your solution with the community!

It will surely help someone who wants to implement a similar to your scenario. 

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

DKD-dev
Posted on: 25 Nov 2021 10:59

Another possibility is to create a composable function that is basically a getter/setter for data needed in the editor modal. This is not the most elegant option, but you can still use the Composition API. Below is my composable function for now:


import { reactive, readonly } from 'vue';


interface SchedulerHelper {
  eventData: any;
  schedulerRef: any;
}

const helper = reactive<SchedulerHelper>({
  eventData: null,
  schedulerRef: null,
});

export const useSchedulerHelper = (): any => {
  const getHelperData = (): SchedulerHelper => readonly(helper);
  const setEventData = (eventData: any) => (helper.eventData = eventData);
  const setSchedulerRef = (ref: any) => (helper.schedulerRef = ref);

  return { getHelperData, setEventData, setSchedulerRef };
};

 

I then call the setEventData and setSchedulerRef function with the appropriate data in the editor-template prop function to get the data, then call getHelperData to get the data in the editor template component. Again, not the most elegant and you can do the same thing in Vuex

If you are wondering why I didn't use provide/inject, it is because the editor template component is not a child of whatever root component you are using to build the scheduler. 

Create an account Log In
View
Type
Status
Category