Rendering Components in detailint

[William]

We have a number of Vue components we've built and are looking for a way render those components in a row's detail cell of a kendo grid.

Is there any guidance on how we might load a component and specify props and slots while accessing the event data?

Thanks,

Will

[Konstantin Dikov]

Hello Will,

For rendering detail template in the Grid component that contains other Vue components, the "detail-template" property should be set to point to a function that returns a Vue Template. For your convenience, following are links for the "detail-template" and the "Vue template":

• https://www.telerik.com/kendo-vue-ui/components/framework/vue-templates/ 
• https://www.telerik.com/kendo-vue-ui/components/grid/api/Grid/#toc-detail-template

If any further assistance is needed on this matter, please do not hesitate to contact us again.


Regards,
Konstantin Dikov
Progress Telerik

[William]

Thanks Konstantin.

If I understand the examples you posted, "templateArgs" is part of the component's data object. And presumably any data key could be set using that approach.

How would I go about setting props or even working with slots? Is that supported?

Thanks,

Will

[William]

I was able to set props and slots using the detailint event:

detailInit(e) {
  let component = Vue.extend(MyComponent)
  let component_instance = new component({propsData: { id: e.data.id}})
  component_instance.$slots.default = [e.data.description] // or this.$createElement('span', e.data.description)
  component_instance.$mount()
  e.detailCell[0].appendChild(card_instance.$el)
},

 

But this breaks down when working with the "template" prop for kendo-grid-column since there's not a way to insert the component's element into the corresponding td... at least not to my knowledge.

I was able to return the outerHTML of a mounted component. It does render the component's template properly but it also seems to lose the event bindings which largely defeats the purpose.

Any suggestions on working with Vue components and Kendo's template props?

[Konstantin Dikov]

Hi William,

Using the detailInit event could not be used for this particular requirement and the only option is the suggested approach in the help topic from my previous post:

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

The important part is the following, where the event arguments are passed to the template in the templateArgs object:

methods: {
    itemTemplate: function(e) {
        return {
            template: Vue.component(Template.name, Template),
            templateArgs: Object.assign({}, e, {
                parentComponent: this.$refs.ddl
            })
        };
    }
}

Note that within the template you will have access to the dataItem by using "templateArgs.model".

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik