Customizing Treeview

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-treeview-font-family	List	`$font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description Font family of the treeview component.
$kendo-treeview-font-size	Number	`$font-size-lg`	`16px`
Description Font size of the treeview component.
$kendo-treeview-line-height	Number	`1.25`	`1.25`
Description Line height of the treeview component.
$kendo-treeview-indent	Number	`16px`	`16px`
Description Indentation of child groups in treeview component.
$kendo-treeview-item-padding-x	Number	`map-get( $spacing, 4 )`	`16px`
Description Horizontal padding of treeview items.
$kendo-treeview-item-padding-y	Number	`map-get( $spacing, 2 )`	`8px`
Description Vertical padding of treeview items.
$kendo-treeview-item-border-width	Number	`0px`	`0px`
Description Border width of treeview items.
$kendo-treeview-item-border-radius	Null	`null`	`null`
Description Border radius of treeview items.
$kendo-treeview-sizes	Map	( 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-bg	Null	`null`	`null`
Description Background color of the treeview component.
$kendo-treeview-text	Color	`$component-text`	`rgba(0, 0, 0, 0.87)`
Description Text color of the treeview component.
$kendo-treeview-border	Null	`null`	`null`
Description Border color of the treeview component.
$kendo-treeview-item-hover-bg	Color	`rgba( $kendo-treeview-text, .07 )`	`rgba(0, 0, 0, 0.07)`
Description Background color of hovered treeview items.
$kendo-treeview-item-hover-text	Null	`null`	`null`
Description Text color of hovered treeview items.
$kendo-treeview-item-hover-border	Null	`null`	`null`
Description Border color of hovered treeview items.
$kendo-treeview-item-hover-gradient	Null	`null`	`null`
Description Background gradient of hovered treeview items.
$kendo-treeview-item-selected-bg	Null	`null`	`null`
Description Background color of selected treeview items.
$kendo-treeview-item-selected-text	Color	`$selected-bg`	`#e51a5f`
Description Text color of selected treeview items.
$kendo-treeview-item-selected-border	Null	`null`	`null`
Description Border color of selected treeview items.
$kendo-treeview-item-selected-gradient	Null	`null`	`null`
Description Background gradient of selected treeview items.
$kendo-treeview-item-focus-shadow	Null	`null`	`null`
Description Box shadow of focused treeview items.
$kendo-treeview-loadmore-bg	Color	`transparent`	`transparent`
Description Background color of load more.
$kendo-treeview-loadmore-text	String	`inherit`	`inherit`
Description Text color of load more.
$kendo-treeview-loadmore-border	Null	`null`	`null`
Description Border color of load more.
$kendo-treeview-loadmore-hover-bg	Color	`transparent`	`transparent`
Description Background color of a hovered load more.
$kendo-treeview-loadmore-hover-text	String	`inherit`	`inherit`
Description Text color of a hovered load more.
$kendo-treeview-loadmore-hover-border	Null	`null`	`null`
Description Border color of a hovered load more.
$kendo-treeview-loadmore-focus-bg	Color	`transparent`	`transparent`
Description Background color of a focused load more.
$kendo-treeview-loadmore-focus-text	String	`inherit`	`inherit`
Description Text color of a focused load more.
$kendo-treeview-loadmore-focus-border	Null	`null`	`null`
Description Border color of a focused load more.
$kendo-treeview-loadmore-focus-shadow	Null	`$kendo-treeview-item-focus-shadow`	`null`
Description Box shadow of a focused load more.

Customizing Treeview

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!

Getting Started

Support Resources

Community