All Components

Vue Templates

The Kendo UI for Vue wrappers support both native Vue templates, through using single-file components, as well as the standard Kendo templates.

  • The Kendo UI for Vue components require the usage of the full Vue build that features both the runtime and the compiler.
  • When using the runtime-only build with vue-cli, a vue-config.js file should be created in the project's root and the runtimeCompiler option should be set to true.

Using Single File Components

The following example demonstrates the usage of a Kendo UI DropDownList with a Vue template:

  1. Define the item template as a vue file (ItemTemplate.vue):

    <template>
       <span>
           <button @click="buttonClick">{{templateArgs.value}}</button>
           {{templateArgs.title}}
       </span>
    </template>
    <script>
       export default {
           name: 'template1',
           methods: {
               buttonClick: function (e) {
                   alert("Button click")
               }
           },
           data () {
               return {
                   templateArgs: {}
               }
           }
       }
    </script>
  2. Set the DropDownList's template as a function:

    <template>
       <div id="container">
           <kendo-dropdownlist ref="ddl"
                               :data-source="localDataSource"
                               :data-text-field="'title'"
                               :data-value-field="'id'"
                               :filter="'contains'"
                               :template="itemTemplate">
           </kendo-dropdownlist>
       </div>
    </template>
  3. Include and register the single-file component in the view where the DropDownList initialization is located. Then, define the template as a method that returns the component and pass any required metadata in the template arguments.

    • Native Vue templates are compiled runtime, thus the parent scope is not automatically passed to child components.
    • To workaround this, any required metadata should be passed in the template arguments as demonstrated in the below code snippet.
    <script>
    import Template from "./ItemTemplate.vue";
    import Vue from "vue";
    
    export default {
       name: "HelloWorld",
       data() {
           return {
               localDataSource: {
                   data: [
                       { title: "title 1", num: 1, numTwo: 2, total: 3, id: 1 },
                       { title: "title 2", num: 1, numTwo: 2, total: 3, id: 2 }
                   ]
               }
           };
       },
       methods: {
           itemTemplate: function(e) {
               return {
                   template: Vue.component(Template.name, Template),
                   templateArgs: Object.assign({}, e, {
                       parentComponent: this.$refs.ddl
                   })
               };
           }
       }
    };
    </script>

    The above snippets are integrated on the following CodeSandbox example.

Using Standard Kendo Templates

The following example demonstrates the usage of a Kendo UI DropDownList with a Kendo template:

  1. Set the DropDownList's template as a function and define the script that holds its content:

    <template>
       <div id="container">
           <kendo-dropdownlist ref="ddl"
                               :data-source="localDataSource"
                               :data-text-field="'title'"
                               :data-value-field="'id'"
                               :filter="'contains'"
                               :template="itemTemplate">
           </kendo-dropdownlist>
    
           <script id="itemTemplate" type="text/x-kendo-template">
               <div>
                   #= data.id #
               </div>
           </script>
       </div>
    </template>
  2. Define the template as a method that returns the compiled script:

    methods: {
       itemTemplate: function (e) {
           var template = kendo.template(kendo.jQuery('#itemTemplate').html())
           return template(e)
       }
    }

    The above snippets are integrated on the following CodeSandbox example.

In this article