Customizing Treeview

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-treeview-font-familyvar( --kendo-font-family, normal )
Description
The font family of the TreeView.
$kendo-treeview-sm-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the small TreeView.
$kendo-treeview-md-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the medium TreeView.
$kendo-treeview-lg-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the large TreeView.
$kendo-treeview-sm-line-heightvar( --kendo-line-height, normal )
Description
The line height of the small TreeView.
$kendo-treeview-md-line-heightvar( --kendo-line-height, normal )
Description
The line height of the medium TreeView.
$kendo-treeview-lg-line-heightvar( --kendo-line-height, normal )
Description
The line height of the large TreeView.
$kendo-treeview-indentmap.get( $kendo-spacing, 6 )
Description
The indentation of child groups in the TreeView.
$kendo-treeview-sm-item-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the small TreeView items.
$kendo-treeview-md-item-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the large TreeView items.
$kendo-treeview-sm-item-padding-ymap.get( $kendo-spacing, 1.5 )
Description
The vertical padding of the small TreeView items.
$kendo-treeview-md-item-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-ymap.get( $kendo-spacing, 2.5 )
Description
The vertical padding of the large TreeView items.
$kendo-treeview-item-border-width0
Description
The border width of the TreeView items.
$kendo-treeview-item-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the TreeView items.
$kendo-treeview-filter-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the TreeViews' filter element.
$kendo-treeview-filter-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the TreeViews' filter element.
$kendo-treeview-sizes( 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 ) )
Description
The sizes map of the TreeView.
$kendo-treeview-bgtransparent
Description
The background color of the TreeView.
$kendo-treeview-textvar( --kendo-component-text, inherit )
Description
The text color of the TreeView.
$kendo-treeview-borderinherit
Description
The border color of the TreeView.
$kendo-treeview-item-bgtransparent
Description
The background color of the TreeView items.
$kendo-treeview-item-textvar( --kendo-component-text, inherit )
Description
The text color of the TreeView items.
$kendo-treeview-item-borderinherit
Description
The border color of the TreeView items.
$kendo-treeview-item-hover-bgvar( --kendo-hover-bg, inherit )
Description
The background color of hovered TreeView items.
$kendo-treeview-item-hover-textvar( --kendo-hover-text, inherit )
Description
The text color of hovered TreeView items.
$kendo-treeview-item-hover-borderinherit
Description
The border color of hovered TreeView items
$kendo-treeview-item-focus-bg$kendo-treeview-item-bg
Description
The background color of focused TreeView items.
$kendo-treeview-item-focus-text$kendo-treeview-item-text
Description
The text color of focused TreeView items.
$kendo-treeview-item-focus-border$kendo-treeview-item-border
Description
The border color of focused TreeView items.
$kendo-treeview-item-focus-shadowinset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The box shadow of focused TreeView items.
$kendo-treeview-item-selected-bgvar( --kendo-selected-bg, inherit )
Description
The background color of selected TreeView items.
$kendo-treeview-item-selected-textvar( --kendo-selected-text, inherit )
Description
The text color of selected TreeView items.
$kendo-treeview-item-selected-borderinherit
Description
The border color of selected TreeView items.
$kendo-treeview-item-disabled-bg$kendo-treeview-item-bg
Description
The background color of disabled TreeView items.
$kendo-treeview-item-disabled-textvar( --kendo-disabled-text, inherit )
Description
The text color of disabled TreeView items.
$kendo-treeview-item-disabled-borderinherit
Description
The border color of disabled TreeView items.
$kendo-treeview-loadmore-bgtransparent
Description
The background color of the Load More button in the TreeView
$kendo-treeview-loadmore-textvar( --kendo-link-text, initial )
Description
The text color of the Load More button in the TreeView
$kendo-treeview-loadmore-borderinherit
Description
The border color of the Load More button in the TreeView
$kendo-treeview-loadmore-hover-bgtransparent
Description
The background color of the hovered Load More button in the TreeView
$kendo-treeview-loadmore-hover-textvar( --kendo-link-hover-text, initial )
Description
The text color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-hover-borderinherit
Description
The border color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-focus-bgtransparent
Description
The background color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-textvar( --kendo-link-hover-text, initial )
Description
The text color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-borderinherit
Description
The border color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-shadow$kendo-treeview-item-focus-shadow
Description
The box shadow of the focused Load More button in the TreeView.
$kendo-treeview-checkbox-wrap-paddingmap.get( $kendo-spacing, .5 )
Description
The padding of the checkbox wrapper in the TreeView.

In this article

Not finding the help you need?