Kendo Vue Treelist duplicate a template when expanding/collapsing item

329 Views Asked by At

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: enter image description here

The result when expanding the element: enter image description here

The result when collapsing the element: enter image description here

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",
        ...
}
0

There are 0 best solutions below