Scheduler - call another component for custom edit template

[VB]

Hello,

I would like to call a component that contains only the custom edit template (to create a new task or edit) for my scheduler.

I followed this solution but the edit window just displays "[Object object]"

The code of scheduler

<kendo-scheduler id="scheduler"
      :data-source="localDataSource"
      :event-template="eventTemplate"
      :editable="{template:editTemplate}"
    >

 

The code of the method editTemplate()

methods: {
    editTemplate: function(){
      return {
         template: Vue.component(CustomEditTemplate.name, CustomEditTemplate),
      }
    }
},

 

The code of the component that contains the custom template

<template>
    <div class="k-edit-form-container">
        <p> Titre <input type="text" /> </p>
        <p>
            <span >Start <input data-role="datetimepicker" name="start" /> </span>
            <span >End <input data-role="datetimepicker" name="end" /> </span>
        </p>
    </div>
</template>

<script>
export default {
    name:"CustomEditTemplate",
}
</script>

 

I think the problem comes from the method editTemplate but I don't undestand why.

Anyone can help me ?

 

Thanks.

 

 

 

[VB]

I found the solution finally ...

 

I don't know if the code here is wrong.

The code that doesn't work for me 

methods: {
    editTemplate: function(){
      return {
         template: Vue.component(CustomEditTemplate.name, CustomEditTemplate),
      }
    }
},

I had to add ".template" and the code works

methods: {
    editTemplate: function(){
      return {
         template: Vue.component(CustomEditTemplate.name, CustomEditTemplate.template), //here
      }
    }
},

 

[VB]

I was wrong, I forgot to put back as before ...

The problem is always the same [object Object].

[Petar]

Hi VB,

The targeted functionality cannot be implemented for the editor template of the Kendo UI for Vue Scheduler Wrapper component. If you want to use a custom editor template, you will have to use a Kendo UI template as is demonstrated in this StackBlitz example.

The editor template would be configured with a Vue template when we release a Native Scheduler Component. Currently, it is not in our near plans to release the Scheduler component. 

I've logged a feature request on your behalf about a Native Scheduler component. Its public thread could be followed on this link: https://feedback.telerik.com/kendo-vue-ui/1512918. Based on the community interest in the component, we may consider its implementation in the future. What you can do is vote for the feature request. The more votes it has, the bigger the chance for its sooner implementation is.  

Let me know if you have any questions related to the current thread or need furhter assistance with it.

Regards,
Petar
Progress Telerik

[VB]

Big thanks to you Petar.

i have another question about the code that you posted.

If I understood correctly the difference between native and wrapper component, VueJs property like v-show, for example, will not work in my code ?

[Petar]

Hi VB,

The main difference between the Native and Wrapper components is that the first is implemented using native Vue functionality and the wrapper components are using the Kendo UI for jQuery suite under the hood.

More about the two types of components you can check below:

• Native components - https://www.telerik.com/kendo-vue-ui/components/introduction/ 
• Wrapper components - https://www.telerik.com/kendo-vue-ui/components/wrappers-introduction/ 

Regards,
Petar
Progress Telerik

[VB]

Thank you.

I have another question.

Before I defined an edit template, the property "resources" of scheduler added a select tag which contains the data that I gave it. 

Typically like : 

<kendo-scheduler
      data-source-ref="remoteDataSource"
      :resources="resources"
      :editable-template="editTemplate"
    >

the resources : 

resources = [
      {
        field: "canalId",
        title: "Canal ID",
        name: "Canaux",
        dataSource: arrayCanaux,
      },
    ];

 

And with this code, the form displayed automatically a select tag with the data.

How can I reproduce that with an custom edit template ?

 

[Petar]

Hi VB,

In the example I sent you, there is the following definition in the editor template. The below code defines what should be the UI element that will set the value for the "ownerId" field.

      <select id="ownerId" data-bind="value:ownerId" data-role="dropdownlist"
                        data-value-field="value" data-text-field="text">
          <option value="1">Alex</option>
          <option value="2">Bob</option>
          <option value="3">Charlie</option>
      </select>

On the other hand, in the 'fields' definition there are the following fields:

      fields: {
        taskId: { from: "TaskID", type: "number" },
        title: {
          from: "Title",
          defaultValue: "No title",
          validation: { required: true }
        },
        start: { type: "date", from: "Start" },
        end: { type: "date", from: "End" },
        startTimezone: { from: "StartTimezone" },
        endTimezone: { from: "EndTimezone" },
        description: { from: "Description" },
        recurrenceId: { from: "RecurrenceID" },
        recurrenceRule: { from: "RecurrenceRule" },
        recurrenceException: { from: "RecurrenceException" },
        ownerId: { from: "OwnerID", defaultValue: 1 },
        isAllDay: { type: "boolean", from: "IsAllDay" }
      }

The ownerId here is a resources field for which we define editor as it is demonstrated in the first code snippet. 

If you want to use a Kendo UI for Vue component as an editor and not the built-in select tag, then you can use the approach demonstated in this StackBlitz example. In it, the editor for the "ownerId" field is a ComboBox component initialized in the edit event of the Scheduler, using the below code:

  onEdit: function(){
    $("#products").kendoComboBox({
        placeholder: "Select product",
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        filter: "contains",
        dataSource: {
            type: "odata",
            serverFiltering: true,
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                }
            }
        }
    });
  }

Check the linked example and the above description and let me know if you have additional questions. 

Regards,
Petar
Progress Telerik

[VB]

I didn't think to use combobox, thanks.

However, it's been 3 days that I'm trying to find a solution to my problem.

jquery__WEBPACK_IMPORTED_MODULE_0___default(...)(...).kendoComboBox is not a function

I have searched in the forum but I just found "make sure that jquery is not imported twice" or "make sure that the js file is imported correctly"

This is my import in main.js

import { createApp } from 'vue';
import App from './App.vue';
import "@progress/kendo-theme-default/dist/all.css";
createApp(App).mount('#app')

 

In the component vue

import $ from "jquery";
import kendo from "@progress/kendo-ui/js/kendo.scheduler";
import {
  Scheduler,
  SchedulerView
  } from "@progress/kendo-scheduler-vue-wrapper";
import { KendoSchedulerDataSource } from "@progress/kendo-datasource-vue-wrapper";

import '@progress/kendo-ui/js/kendo.combobox'

import "@progress/kendo-ui/js/messages/kendo.messages.fr-BE.js";

 

And I don't have any script in my html file.

All the dependencies have been updated

"dependencies": {
    "@progress/kendo-datasource-vue-wrapper": "^2021.1.330",
    "@progress/kendo-dropdowns-vue-wrapper": "^2021.1.330",
    "@progress/kendo-scheduler-vue-wrapper": "^2021.1.330",
    "@progress/kendo-theme-default": "^4.34.0",
    "@progress/kendo-ui": "^2021.1.330",
    "core-js": "^3.10.0",
    "jquery": "^3.6.0",
    "kendo-ui-core": "^2021.1.330",
    "prettier": "^2.2.1",
    "vue": "^3.0.0"
  },

 

 

Do you know where is the problem ? 

[Petar]

Hi VB,

Based only on the reported error I cannot point the reason why you are getting it.

Can you send me a runnable example in which the reported issue can be replicated? Thus I will locally test your scenario and try to identify what is triggering the error. 

Regards,
Petar
Progress Telerik

[VB]

Hi Petar,

Here the runnable example https://stackblitz.com/edit/vue-u2wvu9

[Petar]

Hi VB,

Here is a working example in which the jQuery and Kendo UI libraries are referenced using the NPM packages.

You will see that in this example the ComboBox is initialized using the following code:

      kendo.jQuery("#canaux").kendoComboBox({
        placeholder: "Selectionner canal",
        dataTextField: "text",
        dataValueField: "value",
        dataSource: {
          data: this.arrayCanaux
        }
      });

The marked in yellow code is needed as sometimes when we import jQuery as '$', not the correct jQuery is being loaded. 

Check the linked example and let me know if it helps you implement what you need in your project.

Regards,
Petar
Progress Telerik

[VB]

You are my favorite man Petar !!

It's working perfectly ! big thanks !

[Petar]

You are welcome, VB!

I am happy to hear that everything is working as expected! 

Regards,
Petar
Progress Telerik