Filter

Filters enable users to efficiently manage complex data sets by providing an intuitive interface for defining filter expressions.

Sass Variables

The Telerik and Kendo UI Filter is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the variables provided by the Button component.

VariableDefault ValueComputed ValueValue
kendo-filter-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 Filter.
kendo-filter-padding-yk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the Filter.
kendo-filter-bottom-margink-spacing(7.5)var(--kendo-spacing-7\.5, 1.875rem)Default: k-spacing(7.5)Computed: var(--kendo-spacing-7\.5, 1.875rem)
Description: The bottom margin of the Filter.
kendo-filter-line-size1px1pxDefault: 1pxComputed: 1px
Description: The width of the line that connects the Filter items.
kendo-filter-operator-dropdown-width15em15emDefault: 15emComputed: 15em
Description: The width of the dropdown elements in the Filter items.
kendo-filter-preview-field-text$kendo-color-primaryvar(--kendo-color-primary, #ff6358)Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358)
Description: The text color of the Filter preview field.
kendo-filter-preview-operator-text$kendo-subtle-textvar(--kendo-color-subtle, #666666)Default: $kendo-subtle-textComputed: var(--kendo-color-subtle, #666666)
Description: The text color of the Filter preview operator.
kendo-filter-toolbar-focus-shadow0 0 0 2px rgba(0, 0, 0, .08)(0 0 0 2px rgba(0, 0, 0, 0.08))Default: 0 0 0 2px rgba(0, 0, 0, .08)Computed: (0 0 0 2px rgba(0, 0, 0, 0.08))
Description: The box shadow of the focused Filter toolbar.
Feedback