I'm using Kendo Vue's TreeList component, the problem comes when I use a Vue Template on the TreeList column and later expand or collapse the element.
The initial status of component:
The result when expanding the element:
The result when collapsing the element:
As you can see, every time I expand / collapse an element, the 'acciones' column template is redrawn, so on until I have many instances.
Parent component:
<template>
<div>
<treelistdatasource ref="remoteDataSource" :data="estructurasEvaluacion" :schema-model="model"/>
<treelist data-source-ref="remoteDataSource">
<treelist-column field="nombre"
title="Evaluación"
:width="250"
:expandable="true"/>
<treelist-column field="nombreCorto" title="Nombre corto"/>
<treelist-column field="porcentaje" title="Porcentaje (%)" :template="porcentajeTemplate"/>
<treelist-column title="Cálculo de nota" :template="calculoNotaTemplate"/>
<treelist-column title="Acciones" :template="accionesTemplate" :width="80"/>
</treelist>
</div>
</template>
methods: {
accionesTemplate (e) {
return {
template: Vue.component('acciones', Acciones),
templateArgs: Object.assign({}, e, {
parentComponent: this.$refs.tl
})
}
}
}
Template component:
<template>
<div class="btn-group" role="group">
<button type="button" title="Editar" class="btn btn-primary">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button type="button" title="Eliminar" class="btn btn-primary">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</template>
<script>
export default {
data () {
return {
templateArgs: {}
}
}
}
</script>
Thank you very much in advance.
EDIT:
I'm using Kendo UI 2020.3.1118 and Vue 2.5.17.
"devDependencies": {
"@progress/kendo-datasource-vue-wrapper": "^2020.3.1118",
"@progress/kendo-dropdowns-vue-wrapper": "^2020.3.1118",
"@progress/kendo-grid-vue-wrapper": "^2020.3.1118",
"@progress/kendo-inputs-vue-wrapper": "^2020.3.1118",
"@progress/kendo-layout-vue-wrapper": "^2020.3.1118",
"@progress/kendo-popups-vue-wrapper": "^2020.3.1118",
"@progress/kendo-theme-default": "^4.25.2",
"@progress/kendo-treelist-vue-wrapper": "^2020.3.1118",
"@progress/kendo-ui": "^2020.3.1118",
"@progress/kendo-window-vue-wrapper": "^2020.3.1118",
...
}