New to Kendo UI for Angular? Start a free 30-day trial

Customizing Treeview

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-treeview-font-familyList

$font-family

Roboto, "Helvetica Neue", sans-serif

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

$font-size-lg

16px

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

1.25

1.25

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, 4 )

16px

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

map-get( $spacing, 2 )

8px

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

0px

0px

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

null

null

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: 16px, item-padding-y: 6px), md: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 16px, item-padding-y: 8px), lg: (font-size: 16px, line-height: 1.5, item-padding-x: 16px, item-padding-y: 8px))

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

null

null

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

$component-text

rgba(0, 0, 0, 0.87)

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

null

null

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

rgba( $kendo-treeview-text, .07 )

rgba(0, 0, 0, 0.07)

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

null

null

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-bgNull

null

null

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

$selected-bg

#e51a5f

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-shadowNull

null

null

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

transparent

transparent

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

inherit

inherit

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-textString

inherit

inherit

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-textString

inherit

inherit

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-shadowNull

$kendo-treeview-item-focus-shadow

null

Description
Box shadow of a focused load more.

In this article

Not finding the help you need?