DropDownTree

The DropDownTree component allows you to select a single value from a hierarchical list of predefined options.

Sass Variables

The Telerik and Kendo UI DropDownTree is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Picker Sass variables, as well as the Sass variables provided by the TreeView component.

VariableDefault ValueComputed ValueValue
kendo-dropdowntree-popup-padding-xk-map-get( $kendo-spacing, 2 )8pxDefault: k-map-get( $kendo-spacing, 2 )Computed: 8px
Description: The horizontal padding of the DropdownTree popup
kendo-dropdowntree-popup-padding-yk-map-get( $kendo-spacing, 2 )8pxDefault: k-map-get( $kendo-spacing, 2 )Computed: 8px
Description: The vertical padding of the DropdownTree popup

Picker Variables

VariableDefault ValueComputed ValueValue
kendo-picker-bg$kendo-button-bg #f5f5f5Default: $kendo-button-bgComputed: #f5f5f5
Description: The background color of the Picker components.
kendo-picker-text$kendo-button-text #424242Default: $kendo-button-textComputed: #424242
Description: The text color of the Picker components.
kendo-picker-border$kendo-button-border rgba(0, 0, 0, 0.08)Default: $kendo-button-borderComputed: rgba(0, 0, 0, 0.08)
Description: The border color of the Picker components.
kendo-picker-gradient$kendo-button-gradientrgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)Default: $kendo-button-gradientComputed: rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description: The gradient of the Picker components.
kendo-picker-shadow$kendo-button-shadownullDefault: $kendo-button-shadowComputed: null
Description: The shadow of the Picker components.
kendo-picker-hover-bg$kendo-button-hover-bg #ebebebDefault: $kendo-button-hover-bgComputed: #ebebeb
Description: The background color of the hovered Picker components.
kendo-picker-hover-text$kendo-button-hover-textnullDefault: $kendo-button-hover-textComputed: null
Description: The text color of the hovered Picker components.
kendo-picker-hover-border$kendo-button-hover-bordernullDefault: $kendo-button-hover-borderComputed: null
Description: The border color of the hovered Picker components.
kendo-picker-hover-gradient$kendo-button-hover-gradientnullDefault: $kendo-button-hover-gradientComputed: null
Description: The gradient of the hovered Picker components.
kendo-picker-hover-shadow$kendo-button-hover-shadownullDefault: $kendo-button-hover-shadowComputed: null
Description: The shadow of the hovered Picker components.
kendo-picker-focus-bg$kendo-button-focus-bgnullDefault: $kendo-button-focus-bgComputed: null
Description: The background color of the focused Picker components.
kendo-picker-focus-text$kendo-button-focus-textnullDefault: $kendo-button-focus-textComputed: null
Description: The text color of the focused Picker components.
kendo-picker-focus-border$kendo-button-focus-bordernullDefault: $kendo-button-focus-borderComputed: null
Description: The border color of the focused Picker components.
kendo-picker-focus-gradient$kendo-button-focus-gradientnullDefault: $kendo-button-focus-gradientComputed: null
Description: The gradient of the focused Picker components.
kendo-picker-focus-shadow$kendo-button-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)Default: $kendo-button-focus-shadowComputed: 0 0 0 2px rgba(0, 0, 0, 0.08)
Description: The shadow of the focused Picker components.
kendo-picker-disabled-bgnullnullDefault: nullComputed: null
Description: The background color of the disabled Picker components.
kendo-picker-disabled-textnullnullDefault: nullComputed: null
Description: The text color of the disabled Picker components.
kendo-picker-disabled-bordernullnullDefault: nullComputed: null
Description: The border color of the disabled Picker components.
kendo-picker-disabled-gradientnullnullDefault: nullComputed: null
Description: The gradient of the disabled Picker components.
kendo-picker-disabled-shadownullnullDefault: nullComputed: null
Description: The shadow of the disabled Picker components.
kendo-picker-outline-bgnullnullDefault: nullComputed: null
Description: The background color of the outline Picker components.
kendo-picker-outline-text$kendo-button-text #424242Default: $kendo-button-textComputed: #424242
Description: The text color of the outline Picker components.
kendo-picker-outline-borderif($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-picker-outline-text, .5)) rgba(66, 66, 66, 0.5)Default: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-picker-outline-text, .5))Computed: rgba(66, 66, 66, 0.5)
Description: The border color of the outline Picker components.
kendo-picker-outline-hover-bg$kendo-picker-outline-text #424242Default: $kendo-picker-outline-textComputed: #424242
Description: The background color of the outline hovered Picker components.
kendo-picker-outline-hover-textif($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg )) whiteDefault: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))Computed: white
Description: The text color of the outline hovered Picker components.
kendo-picker-outline-hover-border$kendo-picker-outline-hover-bg #424242Default: $kendo-picker-outline-hover-bgComputed: #424242
Description: The border color of the outline hovered Picker components.
kendo-picker-outline-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the outline focused Picker components.
kendo-picker-outline-focus-textnullnullDefault: nullComputed: null
Description: The text color of the outline focused Picker components.
kendo-picker-outline-focus-bordernullnullDefault: nullComputed: null
Description: The border color of the outline focused Picker components.
kendo-picker-outline-focus-shadow$kendo-picker-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)Default: $kendo-picker-focus-shadowComputed: 0 0 0 2px rgba(0, 0, 0, 0.08)
Description: The shadow of the outline focused Picker components.
kendo-picker-outline-hover-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the outline hovered and focused Picker components.
kendo-picker-outline-hover-focus-textnullnullDefault: nullComputed: null
Description: The text color of the outline hovered and focused Picker components.
kendo-picker-outline-hover-focus-bordernullnullDefault: nullComputed: null
Description: The border color of the outline hovered and focused Picker components.
kendo-picker-flat-bgnullnullDefault: nullComputed: null
Description: The background color of the flat Picker components.
kendo-picker-flat-text$kendo-button-text #424242Default: $kendo-button-textComputed: #424242
Description: The text color of the flat Picker components.
kendo-picker-flat-border$kendo-button-border rgba(0, 0, 0, 0.08)Default: $kendo-button-borderComputed: rgba(0, 0, 0, 0.08)
Description: The border color of the flat Picker components.
kendo-picker-flat-hover-bgif($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $kendo-button-text, .04 )) rgba(66, 66, 66, 0.04)Default: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $kendo-button-text, .04 ))Computed: rgba(66, 66, 66, 0.04)
Description: The background color of the flat hovered Picker components.
kendo-picker-flat-hover-textnullnullDefault: nullComputed: null
Description: The text color of the flat hovered Picker components.
kendo-picker-flat-hover-borderif($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 )) rgba(0, 0, 0, 0.16)Default: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))Computed: rgba(0, 0, 0, 0.16)
Description: The border color of the flat hovered Picker components.
kendo-picker-flat-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the flat focused Picker components.
kendo-picker-flat-focus-textnullnullDefault: nullComputed: null
Description: The text color of the flat focused Picker components.
kendo-picker-flat-focus-bordernullnullDefault: nullComputed: null
Description: The border color of the flat focused Picker components.
kendo-picker-flat-focus-shadow$kendo-picker-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)Default: $kendo-picker-focus-shadowComputed: 0 0 0 2px rgba(0, 0, 0, 0.08)
Description: The shadow of the flat focused Picker components.
kendo-picker-flat-hover-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the flat hovered and focused Picker components.
kendo-picker-flat-hover-focus-textnullnullDefault: nullComputed: null
Description: The text color of the flat hovered and focused Picker components.
kendo-picker-flat-hover-focus-bordernullnullDefault: nullComputed: null
Description: The border color of the flat hovered and focused Picker components.