How to define an custom grid edit template?

[K]

How to define an custom grid edit template?

[Dimitar]

Hello,

The Kendo UI for Vue wrappers support native Vue templates, through using single-file components as demonstrated on the following documentation article:

• Vue Templates Support.
  
  

I have prepared a sample on CodeSandBox, where the above approach is demonstrated with the Grid widget. To achieve the desired result, I have followed the below described steps:

1) Configure the Grid edit mode to popup and also specify the editable template:

<kendo-grid :height="600" ref="'grid'"
     :data-source-ref="'datasource1'"
     :editable-mode="'popup'"
     :editable-template="popupTemplate">
  ...
</kendo-grid>

2) Create the template file (PopupTemplate.vue):

<template>
    <p>Custom Template</p>
</template>

<script>
  export default {
    name: "popupTemplate",
    data() {
      return {
        templateArgs: {}
      };
    }
  };
</script>

3) Import the template to the Grid view:

<script>
import Template from "./PopupTemplate.vue";
import Vue from "vue";

export default {
  name: "HelloWorld",
  methods: {
    popupTemplate: function(e) {
      return {
        template: Vue.component(Template.name, Template),
        templateArgs: Object.assign({}, e, {
          parentComponent: this.$refs.grid
        })
      };
    }
  }
};
</script>

Regards,
Dimitar
Progress Telerik

[K]

Got it.

In Kendo UI for jquery data-bind="value:UnitPrice" populates data into a template. how to achieve that in VUE? is the syntax different

[K]

Dimitar,

While you are at it, how to do custom validation on a template? I am not using a form in the custom template

[Dimitar]

Hello,

Data binding with Kendo MVVM is suitable to be used with simple HTML elements. In a Vue project, this could be achieved by using the integrated v-model mechanism. Detailed information on model binding could be found in the following article:

• Model Binding with Vue and Kendo UI

For validation inside the template, you could validate inputs(regardless if nested inside a form or a simple <div>) by adding html attributes as demosntrated on the following CodeSandbox example. Alternatively, you could use the Kendo Validator and manually call the validate() method inside a click handler to trigger custom validation.

Regards,
Dimitar
Progress Telerik

[Assid]

Hi Damir,

I am testing out kendo vue scheduler to see if this component can work for us. I followed the same steps you iterated here, but for the scheduler instead of the grid component. I am able to load the editor with my custom native vue template, all is working as expected except for the 'save' button. When clicked, the onSave function is not triggered, so nothing happens. Is this a bug in the scheduler, when defining a custom edit template? Is there any workaround?

It's weird that 'delete' and 'cancel' are working as expected, but not 'save'. Do you have a working example that you can share? 

Thank you.

[Dimitar]

Hi Assid,

The Kendo Vue Scheduler is a wrapper of the jQuery Scheduler widget which comes with certain limitations in terms of using native vue templates, and more specifically when working with complex widgets such as the Scheduler. In such cases, it is recommended to setup a standard Kendo UI Template as demonstrated in the documentation:

• https://www.telerik.com/kendo-vue-ui/components/framework/vue-templates/#toc-using-standard-kendo-ui-templates

The above limitations could be bypassed with a Native component implementation. We have currently a Native Vue Grid component and are working to expand the suite with additional native components(DropDownList, NumericTextBox and more) for the upcoming release. I would suggest to check the release notes after the official release for additional information.

Regards,
Dimitar
Progress Telerik

[Assid]

Thanks for the quick response, I initially tried to use Kendo UI Template but it was very limited.Our scheduler edit template is too complex and I believe when using kendo ui template,I can't add my custom html code to it.

I hope you solve the 'save' button issue in the future. 

[Johann]

Hi there.

Please see this CodeSandbox for reference: https://codesandbox.io/s/tpi1p

I forked the CodeSandox referenced above to try this out, but I cannot get data entered into a custom Popup Editor to bind/save back to the datasource. If I use a function for the 'read' and 'update' for the transport, I am not seeing in the data property of the event the data entered/selected in the popup editor. Yet, if I do not use a template, the data updates/creates correctly.

What am I missing?

[Petar]

Hi Johann,

Using a Native template inside a Kendo UI for Vue Wrappers component is not supported for complex scenarios like the Grid's popup editor template.  

If you want to use the Kendo UI for Vue Wrappers Grid component, you will have to use Kendo templates for the definition of the popup editor template. If you want to keep the current editor template, you can switch to the Native Grid component

I hope the above information will help you implement the targeted functionality. 

Regards,
Petar
Progress Telerik