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.

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 Name column
<template v-slot:zeroColumnCellTemplate="{ props }">
      class="k-icon k-i-none"
      v-for="(iteration, index) in props.level.slice(1)"
          ? 'k-i-caret-alt-down'
          : props.dataItem['employees']
          ? 'k-i-caret-alt-right'
          : '',
          dataItem: props.dataItem,
          value: props['aria-expanded'],
    <b style="color: brown">{{ props.value }}</b>
  • Styling the Full Time column
<template v-slot:myCellTemplate="{ props }">
        color: props.value ? 'green' : 'red',
      {{ props.value }}

In this article

Not finding the help you need?