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-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the DropdownTree popup
kendo-dropdowntree-popup-padding-yk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the DropdownTree popup

Picker Variables

VariableDefault ValueComputed ValueValue
kendo-picker-bg$kendo-button-bgvar(--kendo-color-base, #f5f5f5)Default: $kendo-button-bgComputed: var(--kendo-color-base, #f5f5f5)
Description: The background color of the Picker components.
kendo-picker-text$kendo-button-textvar(--kendo-color-on-base, #3d3d3d)Default: $kendo-button-textComputed: var(--kendo-color-on-base, #3d3d3d)
Description: The text color of the Picker components.
kendo-picker-border$kendo-button-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-button-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the Picker components.
kendo-picker-gradient$kendo-button-gradientnullDefault: $kendo-button-gradientComputed: null
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-bgvar(--kendo-color-base-hover, #ebebeb)Default: $kendo-button-hover-bgComputed: var(--kendo-color-base-hover, #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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)Default: $kendo-button-focus-shadowComputed: 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)
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-textvar(--kendo-color-on-base, #3d3d3d)Default: $kendo-button-textComputed: var(--kendo-color-on-base, #3d3d3d)
Description: The text color of the outline Picker components.
kendo-picker-outline-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent)Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent)
Description: The border color of the outline Picker components.
kendo-picker-outline-hover-bg$kendo-picker-outline-textvar(--kendo-color-on-base, #3d3d3d)Default: $kendo-picker-outline-textComputed: var(--kendo-color-on-base, #3d3d3d)
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 ))var(--kendo-color-base, #f5f5f5)Default: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))Computed: var(--kendo-color-base, #f5f5f5)
Description: The text color of the outline hovered Picker components.
kendo-picker-outline-hover-border$kendo-picker-outline-hover-bgvar(--kendo-color-on-base, #3d3d3d)Default: $kendo-picker-outline-hover-bgComputed: var(--kendo-color-on-base, #3d3d3d)
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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)Default: $kendo-picker-focus-shadowComputed: 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)
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-textvar(--kendo-color-on-base, #3d3d3d)Default: $kendo-button-textComputed: var(--kendo-color-on-base, #3d3d3d)
Description: The text color of the flat Picker components.
kendo-picker-flat-border$kendo-button-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-button-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the flat Picker components.
kendo-picker-flat-hover-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 ))color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 4%, transparent)Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 ))Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 4%, transparent)
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 ))var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))Default: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))Computed: var(--kendo-color-border-alt, 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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)Default: $kendo-picker-focus-shadowComputed: 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)
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.