Customizing Treeview

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-treeview-font-familyString

$font-family

inherit

Description
Font family of the treeview component.
$kendo-treeview-font-sizeNumber

$font-size-md

14px

Description
Font size of the treeview component.
$kendo-treeview-line-heightNumber

$line-height-md

1.4285714286

Description
Line height of the treeview component.
$kendo-treeview-indentNumber

16px

16px

Description
Indentation of child groups in treeview component.
$kendo-treeview-item-padding-xNumber

map-get( $spacing, 2 )

8px

Description
Horizontal padding of treeview items.
$kendo-treeview-item-padding-yNumber

map-get( $spacing, 1 )

4px

Description
Vertical padding of treeview items.
$kendo-treeview-item-border-widthNumber

0px

0px

Description
Border width of treeview items.
$kendo-treeview-item-border-radiusNumber

$kendo-border-radius-md

4px

Description
Border radius of treeview items.
$kendo-treeview-sizesMap

( sm: ( font-size: $kendo-treeview-font-size-sm, line-height: $kendo-treeview-line-height-sm, item-padding-x: $kendo-treeview-item-padding-x-sm, item-padding-y: $kendo-treeview-item-padding-y-sm ), md: ( font-size: $kendo-treeview-font-size-md, line-height: $kendo-treeview-line-height-md, item-padding-x: $kendo-treeview-item-padding-x-md, item-padding-y: $kendo-treeview-item-padding-y-md ), lg: ( font-size: $kendo-treeview-font-size-lg, line-height: $kendo-treeview-line-height-lg, item-padding-x: $kendo-treeview-item-padding-x-lg, item-padding-y: $kendo-treeview-item-padding-y-lg ) )

(sm: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 8px, item-padding-y: 2px), md: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 8px, item-padding-y: 4px), lg: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 8px, item-padding-y: 6px))

Description
The sizes of the treeview.
$kendo-treeview-bgNull

null

null

Description
Background color of the treeview component.
$kendo-treeview-textColor

$component-text

#424242

Description
Text color of the treeview component.
$kendo-treeview-borderNull

null

null

Description
Border color of the treeview component.
$kendo-treeview-item-hover-bgColor

$hovered-bg

#f0f0f0

Description
Background color of hovered treeview items.
$kendo-treeview-item-hover-textColor

$hovered-text

#424242

Description
Text color of hovered treeview items.
$kendo-treeview-item-hover-borderNull

null

null

Description
Border color of hovered treeview items.
$kendo-treeview-item-hover-gradientNull

null

null

Description
Background gradient of hovered treeview items.
$kendo-treeview-item-selected-bgColor

$selected-bg

#ff6358

Description
Background color of selected treeview items.
$kendo-treeview-item-selected-textColor

$selected-text

white

Description
Text color of selected treeview items.
$kendo-treeview-item-selected-borderNull

null

null

Description
Border color of selected treeview items.
$kendo-treeview-item-selected-gradientNull

null

null

Description
Background gradient of selected treeview items.
$kendo-treeview-item-focus-shadowList

$focused-shadow

inset 0 0 0 2px rgba(0, 0, 0, 0.13)

Description
Box shadow of focused treeview items.
$kendo-treeview-loadmore-bgColor

transparent

transparent

Description
Background color of load more.
$kendo-treeview-loadmore-textColor

$link-text

#ff6358

Description
Text color of load more.
$kendo-treeview-loadmore-borderNull

null

null

Description
Border color of load more.
$kendo-treeview-loadmore-hover-bgColor

transparent

transparent

Description
Background color of a hovered load more.
$kendo-treeview-loadmore-hover-textColor

$link-hover-text

#d6534a

Description
Text color of a hovered load more.
$kendo-treeview-loadmore-hover-borderNull

null

null

Description
Border color of a hovered load more.
$kendo-treeview-loadmore-focus-bgColor

transparent

transparent

Description
Background color of a focused load more.
$kendo-treeview-loadmore-focus-textColor

$link-hover-text

#d6534a

Description
Text color of a focused load more.
$kendo-treeview-loadmore-focus-borderNull

null

null

Description
Border color of a focused load more.
$kendo-treeview-loadmore-focus-shadowList

$kendo-treeview-item-focus-shadow

inset 0 0 0 2px rgba(0, 0, 0, 0.13)

Description
Box shadow of a focused load more.

In this article

Not finding the help you need?