New to Kendo UI for VueStart 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.

Change Theme
Theme
Loading ...

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 Name column
html
<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 Time column
html
<template v-slot:myCellTemplate="{ props }">
  <td>
    <span
      :style="{
        color: props.value ? 'green' : 'red',
      }"
    >
      {{ props.value }}
    </span>
  </td>
</template>
In this article
Getting StartedBasic usageSuggested Links
Not finding the help you need?
Contact Support