This is a migrated thread and some comments may be shown as answers.

Rendering Components in detailint

4 Answers 62 Views
This is a migrated thread and some comments may be shown as answers.
William
Top achievements
Rank 1
William asked on 07 Dec 2018, 06:53 PM

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

4 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 11 Dec 2018, 04:49 PM
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":
If any further assistance is needed on this matter, please do not hesitate to contact us again.


Regards,
Konstantin Dikov
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
William
Top achievements
Rank 1
answered on 11 Dec 2018, 11:30 PM

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

0
William
Top achievements
Rank 1
answered on 12 Dec 2018, 10:02 PM

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?

0
Konstantin Dikov
Telerik team
answered on 13 Dec 2018, 12:54 PM
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:
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
William
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
William
Top achievements
Rank 1
Share this question
or