New to Kendo UI for Vue? Start a free 30-day trial
TreeList Custom Templates
The Kendo UI for Vue Native TreeList provides an option for customizing the content of its data cells by passing separate templates to each column.
Getting Started
To define a cell template in the Native TreeList you should use its cell column property and pass a slot template name to it.
Basic usage
The following example demonstrates how to define a custom cell template in the TreeList.
Example
View Source
Change Theme:
The above example uses two different slot templates that format and style the Name and Full Time columns. The two slot templates are defined as follows and demonstrate how you can customize both the regular TreeList columns and these that control the expanding/collapsing of its rows:
- Styling the
Namecolumn
<template v-slot:zeroColumnCellTemplate="{ props }">
<td
:class="props.class"
:colspan="props.colSpan"
:aria-colindex="props['aria-colindex']"
:aria-expanded="props['aria-expanded']"
:aria-selected="props['aria-selected']"
:role="props.role"
:data-grid-col-index="props['data-grid-col-index']"
>
<span
class="k-icon k-i-none"
v-for="(iteration, index) in props.level.slice(1)"
></span>
<span
:class="[
'k-icon',
props['aria-expanded']
? 'k-i-caret-alt-down'
: props.dataItem['employees']
? 'k-i-caret-alt-right'
: '',
]"
@click="
onExpandChange({
dataItem: props.dataItem,
value: props['aria-expanded'],
})
"
:data-prevent-selection="true"
></span>
<b style="color: brown">{{ props.value }}</b>
</td>
</template>- Styling the
Full Timecolumn
<template v-slot:myCellTemplate="{ props }">
<td>
<span
:style="{
color: props.value ? 'green' : 'red',
}"
>
{{ props.value }}
</span>
</td>
</template>