Kendo-ui-core: Using Vue components in the templates of the Vue wrappers

[Iankodj]

Research and implement a native way to have Vue templates for the widgets' templates and use Vue components inside them.

[zdravkov]

Related to this issue.

[cjpearson]

@zdravkov, I can't see the linked issue. Is there a public place to follow this work?

[zdravkov]

We have added this functionality and it will be available from the upcoming R1 2018 that is expected next week.

[cjpearson]

Cool, thanks!

[badams2527]

I'm trying to use some custom components inside the column templates of the Grid. Is there any documentation on how to use this? Or is this issue not covering that kind of functionality?

[mchikhaoui]

is there any sample for that ? thanks!

[zdravkov]

Here is how you can use native Vue templates with Kendo Vue UI:

1. Include and register the template component:

import Template from './Template.vue'
var itemTemplate = Vue.component(Template.name, Template)

1. Define the template as function that returns object with property 'template' and value the template component:

itemTemplate: function (e) {
      return {
        template: itemTemplate,
        templateArgs: e
      }
    }

1. If the item arguments are needed in the template they should be registered in the data object as for example in this sample template:

<template>
   <div>
      <button @click="buttonClick">{{templateArgs.text}}</button>
  </div>
</template>

<script>

export default {
  name: 'template1',
  methods: {
    buttonClick: function (e) {
      alert(1)
    }
  },
  data () {
    return {
      templateArgs: {},
      itemText: 'template'
    }
  }
}
</script>

I am also attaching a sample project here:
my-project-test.zip

We will do our best to add nice documentation about this feature as soon as possible.

[mchikhaoui]

@zdravkov thank you 👍

[mchikhaoui]

@zdravkov , it's works fine with wrapper, but not when try using it in script block like that :

columns:[{field:"name", title:"Name", width:"250", template: e => {
          return {
            template: itemTemplate,
            templateArgs: e
          }
        }
        }]

[zdravkov]

Yes - currently only passing the template function as a prop is supported for this scenario.

[mchikhaoui]

thank you for this quick answer.

[mikecole]

This example is great. However, how would this translate to populating the headerTemplate on the kendo-grid-column? I can successfully do something like this:

<kendo-grid-column v-for="(column, index) in columnDefinitions" :title="column.title" :width="250" :field="column.field" :headerTemplate="itemTemplate"></kendo-grid-column>

But how do I send data to itemTemplate? In my scenario I'm accepting an array of column definitions and dynamically building the kendo-grid-columns (note v-for above). I'd like each instance of itemTemplate to receive it's columnDefinition so I can construct as needed.

Thanks!

[Etheryte]

@zdravkov Why are only props supported at the moment? The data binding logic should be very similar. Also, why is data passed to the template by what is literally a hack, manually setting the internal data? The correct way would be to use props for this.

[zdravkov]

Hi all,

Straight to the questions:
@mikecole : First of all, please excuse me for not reaching out earlier - headerTemplate in the grid column does not pass any parameter to the function and that is why with the current implementation we can't send meaningful data with the Vue wrapper either. In such case you will have to define the columns one by one. You could also submit a feature request with the useful data that could be passes in the parameter for possible implementation in the future.

@Etheryte : yes indeed, this is how the templates are implemented in Kendo Vue wrappers at the moment. We have tested and thought about different ways of adding support for native Vue templates and this was the one that worked best against all our tests with Kendo widgets. If you have some concrete idea for improvements or you meet some scenario that is not working correctly please submit a new issue with detailed information about it so we could be able to inspect it deeper and provide appropriate answer.

If you are Vue and Kendo fans you could also vote and share thoughts on this issue and what would you expect from such native Vue components.

Greetings

[ivanchev]

@blueTeddy Please use the forum or the support channel.

[uoc1691]

When I use this approach for kendo treeview, template component uses the args passed last. So last item is duplicated for all nodes on the same level. Didn't do anything special. Similar code as the example.

[zdravkov]

Hey, @uoc1691 ,

Thank you for reaching out - for such questions we recommend using our forums. It will also be more helpful if you share the exact code that you are using or isolate the issue in a plunker or sample project so it could be easily replicated.

[uoc1691]

@zdravkov We've already created a support ticket for this. Here's a sample
kendo-with-vuex-bug-template-duplicate-nodes.zip