Treelist - Repeated rend tempalte after filtering

[Wei]

Hi  

I want to rend a menu components（and sometimes other third-parts vue components） at one of columns in my treelist.

It works well at first rend time, but after filter certain value, the result row appears 2 menu, and when clear the filter, 3 menu appeared.  

I finished a demo to explain the problem base on demo in vue template page.demo

I try to change as following, then the filter value cannot change at first filter....

columnTemplate (e) {
if(this.$el.querySelectorAll(`.titleTemplate_${e.id}`).length=== 0){
return {
template: TemplateTitle,
templateArgs: e
}
}else{
return {}
}
}

 

It will be really helpful if a well-worked demo provided.

Thanks!

[Dimitar]

Hello Wei,

As the Kendo UI for Vue are wrappers, there might be certain scenarios where utilizing native Vue templates through single-file components is not possible. In such cases, you could use the standard kendo templates to workaround this limitation. Here is an updated Dojo example where the issue with the duplicated buttons is resolved by using kendo templates:

• https://codesandbox.io/s/oj95p864rq

The above scenario will work with a native Vue implementation of the components. We have released a beta version of native Vue Grid with the 2019 R1 release which you could check out here: 

• Native Vue Grid Docs.

I would encourage you to vote for the Native Vue Components Feedback Item and leave your feedback so that we are able to determine the demand for implementing a fully featured native Vue suite.

Regards,
Dimitar
Progress Telerik