Styling & Themes / Bootstrap Theme / Customizing Treeview / 

Customizing Treeview

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-treeview-font-familyList

$kendo-font-family

system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

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

$kendo-font-size-md

1rem

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

$kendo-line-height-md

1.5

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

k-map-get( $kendo-spacing, 3 )

0.75rem

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

k-map-get( $kendo-spacing, 1 )

0.25rem

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

0px

0px

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

k-map-get( $kendo-spacing, 1 )

0.25rem

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

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

(sm: (font-size: 0.875rem, line-height: 1.4285714286, item-padding-x: 0.5rem, item-padding-y: 0.25rem), md: (font-size: 1rem, line-height: 1.5, item-padding-x: 0.75rem, item-padding-y: 0.25rem), lg: (font-size: 1rem, line-height: 1.5, item-padding-x: 0.75rem, item-padding-y: 0.5rem))

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

null

null

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

$kendo-component-text

#212529

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

null

null

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

$kendo-hover-bg

#e9ecef

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

$kendo-hover-text

#212529

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

$kendo-treeview-item-hover-bg

#e9ecef

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

$kendo-selected-bg

#0d6efd

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

$kendo-selected-text

white

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

$kendo-treeview-item-selected-bg

#0d6efd

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

inset 0 0 0 2px rgba( $kendo-treeview-text, .15 )

inset 0 0 0 2px rgba(33, 37, 41, 0.15)

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

transparent

transparent

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

$kendo-link-text

#0d6efd

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

$kendo-link-hover-text

#0a58ca

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

$kendo-link-hover-text

#0a58ca

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(33, 37, 41, 0.15)

Description
Box shadow of a focused load more.

Suggested Links

Previous
Customizing Toolbar
Next
Customizing Typography

In this article

Not finding the help you need?

Contact Support