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

Customizing Treeview

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-treeview-font-familyStringvar( --kendo-font-family, normal )var(--kendo-font-family, normal)
Description
The font family of the TreeView.
$kendo-treeview-sm-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the small TreeView.
$kendo-treeview-md-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the medium TreeView.
$kendo-treeview-lg-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the large TreeView.
$kendo-treeview-sm-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the small TreeView.
$kendo-treeview-md-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the medium TreeView.
$kendo-treeview-lg-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the large TreeView.
$kendo-treeview-indentStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The indentation of child groups in the TreeView.
$kendo-treeview-sm-item-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the small TreeView items.
$kendo-treeview-md-item-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the large TreeView items.
$kendo-treeview-sm-item-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the small TreeView items.
$kendo-treeview-md-item-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-yStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The vertical padding of the large TreeView items.
$kendo-treeview-item-border-widthNumber00
Description
The border width of the TreeView items.
$kendo-treeview-item-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the TreeView items.
$kendo-treeview-filter-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the TreeViews' filter element.
$kendo-treeview-filter-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the TreeViews' filter element.
$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":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)","item-padding-x":"var(--kendo-spacing-2, 0.5rem)","item-padding-y":"var(--kendo-spacing-1\\.5, 0.375rem)"
  • md: "font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)","item-padding-x":"var(--kendo-spacing-2, 0.5rem)","item-padding-y":"var(--kendo-spacing-2, 0.5rem)"
  • lg: "font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)","item-padding-x":"var(--kendo-spacing-2, 0.5rem)","item-padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)"
Description
The sizes map of the TreeView.
$kendo-treeview-bgColortransparenttransparent
Description
The background color of the TreeView.
$kendo-treeview-textStringvar( --kendo-component-text, inherit )var(--kendo-component-text, inherit)
Description
The text color of the TreeView.
$kendo-treeview-borderStringinheritinherit
Description
The border color of the TreeView.
$kendo-treeview-item-bgColortransparenttransparent
Description
The background color of the TreeView items.
$kendo-treeview-item-textStringvar( --kendo-component-text, inherit )var(--kendo-component-text, inherit)
Description
The text color of the TreeView items.
$kendo-treeview-item-borderStringinheritinherit
Description
The border color of the TreeView items.
$kendo-treeview-item-hover-bgStringvar( --kendo-hover-bg, inherit )var(--kendo-hover-bg, inherit)
Description
The background color of hovered TreeView items.
$kendo-treeview-item-hover-textStringvar( --kendo-hover-text, inherit )var(--kendo-hover-text, inherit)
Description
The text color of hovered TreeView items.
$kendo-treeview-item-hover-borderStringinheritinherit
Description
The border color of hovered TreeView items
$kendo-treeview-item-focus-bgColor$kendo-treeview-item-bgtransparent
Description
The background color of focused TreeView items.
$kendo-treeview-item-focus-textString$kendo-treeview-item-textvar(--kendo-component-text, inherit)
Description
The text color of focused TreeView items.
$kendo-treeview-item-focus-borderString$kendo-treeview-item-borderinherit
Description
The border color of focused TreeView items.
$kendo-treeview-item-focus-shadowListinset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)
Description
The box shadow of focused TreeView items.
$kendo-treeview-item-selected-bgStringvar( --kendo-selected-bg, inherit )var(--kendo-selected-bg, inherit)
Description
The background color of selected TreeView items.
$kendo-treeview-item-selected-textStringvar( --kendo-selected-text, inherit )var(--kendo-selected-text, inherit)
Description
The text color of selected TreeView items.
$kendo-treeview-item-selected-borderStringinheritinherit
Description
The border color of selected TreeView items.
$kendo-treeview-item-disabled-bgColor$kendo-treeview-item-bgtransparent
Description
The background color of disabled TreeView items.
$kendo-treeview-item-disabled-textStringvar( --kendo-disabled-text, inherit )var(--kendo-disabled-text, inherit)
Description
The text color of disabled TreeView items.
$kendo-treeview-item-disabled-borderStringinheritinherit
Description
The border color of disabled TreeView items.
$kendo-treeview-loadmore-bgColortransparenttransparent
Description
The background color of the Load More button in the TreeView
$kendo-treeview-loadmore-textStringvar( --kendo-link-text, initial )var(--kendo-link-text, initial)
Description
The text color of the Load More button in the TreeView
$kendo-treeview-loadmore-borderStringinheritinherit
Description
The border color of the Load More button in the TreeView
$kendo-treeview-loadmore-hover-bgColortransparenttransparent
Description
The background color of the hovered Load More button in the TreeView
$kendo-treeview-loadmore-hover-textStringvar( --kendo-link-hover-text, initial )var(--kendo-link-hover-text, initial)
Description
The text color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-hover-borderStringinheritinherit
Description
The border color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-focus-bgColortransparenttransparent
Description
The background color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-textStringvar( --kendo-link-hover-text, initial )var(--kendo-link-hover-text, initial)
Description
The text color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-borderStringinheritinherit
Description
The border color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-shadowList$kendo-treeview-item-focus-shadowinset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)
Description
The box shadow of the focused Load More button in the TreeView.
$kendo-treeview-checkbox-wrap-paddingStringk-spacing(.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The padding of the checkbox wrapper in the TreeView.

In this article

Not finding the help you need?