Progress LogoProgressDesign System Kit
FoundationThemesCSS UtilitiesComponentsUI TemplatesResources

Foundation

Themes

CSS Utilities

Components

UI Templates

Resources

FileManager

The FileManager component provides a structured and user-friendly way to organize, access, and manage files and folders.

On this page

Sass Variables

The Telerik and Kendo UI FileManager is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Toolbar Sass variables, as well as the Sass variables provided by the Button, SplitButton, TreeView, ListView, BreadCrumb, and Grid components.

VariableDefault ValueComputed ValueValue
kendo-file-manager-spacerk-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The space between the FileManager items.
kendo-file-manager-border-width1px1pxDefault: 1pxComputed: 1px
Description: The border width of the FileManager.
kendo-file-manager-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the FileManager.
kendo-file-manager-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the FileManager.
kendo-file-manager-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The line height of the FileManager.
kendo-file-manager-bgk-color(surface-alt)var(--kendo-color-surface-alt, #ffffff)Default: k-color(surface-alt)Computed: var(--kendo-color-surface-alt, #ffffff)
Description: The background color of the FileManager.
kendo-file-manager-textk-color(on-app-surface)var(--kendo-color-on-app-surface, #3d3d3d)Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the FileManager.
kendo-file-manager-borderk-color(border)var(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: k-color(border)Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the FileManager.
kendo-file-manager-toolbar-border-width$kendo-file-manager-border-width1pxDefault: $kendo-file-manager-border-widthComputed: 1px
Description: The border width of the FileManager Toolbar.
kendo-file-manager-toolbar-bgnullnullDefault: nullComputed: null
Description: The background color of the FileManager Toolbar.
kendo-file-manager-toolbar-textnullnullDefault: nullComputed: null
Description: The text color of the FileManager Toolbar.
kendo-file-manager-toolbar-bordernullnullDefault: nullComputed: null
Description: The border color of the FileManager Toolbar.
kendo-file-manager-toolbar-gradientnullnullDefault: nullComputed: null
Description: The gradient of the FileManager Toolbar.
kendo-file-manager-navigation-padding-x$kendo-file-manager-spacervar(--kendo-spacing-4, 1rem)Default: $kendo-file-manager-spacerComputed: var(--kendo-spacing-4, 1rem)
Description: The horizontal padding of the FileManager Navigation.
kendo-file-manager-navigation-padding-y$kendo-file-manager-spacervar(--kendo-spacing-4, 1rem)Default: $kendo-file-manager-spacerComputed: var(--kendo-spacing-4, 1rem)
Description: The vertical padding of the FileManager Navigation.
kendo-file-manager-navigation-width20%20%Default: 20%Computed: 20%
Description: The width of the FileManager Navigation.
kendo-file-manager-navigation-border-width$kendo-file-manager-border-width1pxDefault: $kendo-file-manager-border-widthComputed: 1px
Description: The border width of the FileManager Navigation.
kendo-file-manager-navigation-bgnullnullDefault: nullComputed: null
Description: The background color of the FileManager Navigation.
kendo-file-manager-navigation-textnullnullDefault: nullComputed: null
Description: The text color of the FileManager Navigation.
kendo-file-manager-navigation-bordernullnullDefault: nullComputed: null
Description: The border color of the FileManager Navigation.
kendo-file-manager-breadcrumb-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 FileManager Breadcrumb.
kendo-file-manager-breadcrumb-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 FileManager Breadcrumb.
kendo-file-manager-breadcrumb-border-width$kendo-file-manager-border-width1pxDefault: $kendo-file-manager-border-widthComputed: 1px
Description: The border width of the FileManager Breadcrumb.
kendo-file-manager-breadcrumb-bg$kendo-toolbar-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-toolbar-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of the FileManager Breadcrumb.
kendo-file-manager-breadcrumb-textnullnullDefault: nullComputed: null
Description: The text color of the FileManager Breadcrumb.
kendo-file-manager-breadcrumb-bordernullnullDefault: nullComputed: null
Description: The border color of the FileManager Breadcrumb.
kendo-file-manager-listview-bgnullnullDefault: nullComputed: null
Description: The background color of the FileManager ListView.
kendo-file-manager-listview-textnullnullDefault: nullComputed: null
Description: The text color of the FileManager ListView.
kendo-file-manager-listview-bordernullnullDefault: nullComputed: null
Description: The border color of the FileManager ListView.
kendo-file-manager-listview-item-padding-xk-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The horizontal padding of the FileManager ListView item.
kendo-file-manager-listview-item-padding-yk-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The vertical padding of the FileManager ListView item.
kendo-file-manager-listview-item-width120px120pxDefault: 120pxComputed: 120px
Description: The width of the FileManager ListView item.
kendo-file-manager-listview-item-height120px120pxDefault: 120pxComputed: 120px
Description: The height of the FileManager ListView item.
kendo-file-manager-listview-item-bgnullnullDefault: nullComputed: null
Description: The background color of the FileManager ListView item.
kendo-file-manager-listview-item-textnullnullDefault: nullComputed: null
Description: The text color of the FileManager ListView item.
kendo-file-manager-listview-item-bordernullnullDefault: nullComputed: null
Description: The border color of the FileManager ListView item.
kendo-file-manager-listview-item-icon-bgnullnullDefault: nullComputed: null
Description: The background color of the FileManager ListView item icon.
kendo-file-manager-listview-item-icon-textk-color(subtle)var(--kendo-color-subtle, #666666)Default: k-color(subtle)Computed: var(--kendo-color-subtle, #666666)
Description: The text color of the FileManager ListView item icon.
kendo-file-manager-listview-item-icon-bordernullnullDefault: nullComputed: null
Description: The border color of the FileManager ListView item icon.
kendo-file-manager-grid-bgnullnullDefault: nullComputed: null
Description: The background color of the FileManager Grid.
kendo-file-manager-grid-textnullnullDefault: nullComputed: null
Description: The text color of the FileManager Grid.
kendo-file-manager-grid-bordernullnullDefault: nullComputed: null
Description: The border color of the FileManager Grid.
kendo-file-manager-preview-padding-x$kendo-file-manager-spacervar(--kendo-spacing-4, 1rem)Default: $kendo-file-manager-spacerComputed: var(--kendo-spacing-4, 1rem)
Description: The horizontal padding of the FileManager preview.
kendo-file-manager-preview-padding-y$kendo-file-manager-spacervar(--kendo-spacing-4, 1rem)Default: $kendo-file-manager-spacerComputed: var(--kendo-spacing-4, 1rem)
Description: The vertical padding of the FileManager preview.
kendo-file-manager-preview-width20%20%Default: 20%Computed: 20%
Description: The width of the FileManager preview.
kendo-file-manager-preview-border-width$kendo-file-manager-border-width1pxDefault: $kendo-file-manager-border-widthComputed: 1px
Description: The border width of the FileManager preview.
kendo-file-manager-preview-spacing$kendo-file-manager-spacervar(--kendo-spacing-4, 1rem)Default: $kendo-file-manager-spacerComputed: var(--kendo-spacing-4, 1rem)
Description: The spacing of the FileManager preview.
kendo-file-manager-preview-column-gapk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The gap between the columns in the FileManager preview.
kendo-file-manager-preview-bgnullnullDefault: nullComputed: null
Description: The background color of the FileManager preview.
kendo-file-manager-preview-textnullnullDefault: nullComputed: null
Description: The text color of the FileManager preview.
kendo-file-manager-preview-bordernullnullDefault: nullComputed: null
Description: The border color of the FileManager preview.
kendo-file-manager-preview-icon-bgnullnullDefault: nullComputed: null
Description: The background color of the FileManager preview icon.
kendo-file-manager-preview-icon-textk-color(subtle)var(--kendo-color-subtle, #666666)Default: k-color(subtle)Computed: var(--kendo-color-subtle, #666666)
Description: The text color of the FileManager preview icon.
kendo-file-manager-preview-icon-bordernullnullDefault: nullComputed: null
Description: The border color of the FileManager preview icon.

BreadCrumb Variables

VariableDefault ValueComputed ValueValue
kendo-breadcrumb-border-width0px0pxDefault: 0pxComputed: 0px
Description: The width of the border around the Breadcrumb.
kendo-breadcrumb-margin-xnullnullDefault: nullComputed: null
Description: The horizontal margin of the Breadcrumb.
kendo-breadcrumb-margin-ynullnullDefault: nullComputed: null
Description: The vertical margin of the Breadcrumb.
kendo-breadcrumb-padding-xnullnullDefault: nullComputed: null
Description: The horizontal padding of the Breadcrumb.
kendo-breadcrumb-padding-ynullnullDefault: nullComputed: null
Description: The vertical padding of the Breadcrumb.
kendo-breadcrumb-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the Breadcrumb.
kendo-breadcrumb-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the Breadcrumb.
kendo-breadcrumb-sm-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the small Breadcrumb.
kendo-breadcrumb-md-font-size$kendo-breadcrumb-font-sizevar(--kendo-font-size, inherit)Default: $kendo-breadcrumb-font-sizeComputed: var(--kendo-font-size, inherit)
Description: The font size of the medium Breadcrumb.
kendo-breadcrumb-lg-font-sizevar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)Default: var( --kendo-font-size-lg, inherit )Computed: var(--kendo-font-size-lg, inherit)
Description: The font size of the large Breadcrumb.
kendo-breadcrumb-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The line-height of the Breadcrumb.
kendo-breadcrumb-sm-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The line-height of the small Breadcrumb.
kendo-breadcrumb-md-line-height$kendo-breadcrumb-line-heightvar(--kendo-line-height, normal)Default: $kendo-breadcrumb-line-heightComputed: var(--kendo-line-height, normal)
Description: The line-height of the medium Breadcrumb.
kendo-breadcrumb-lg-line-heightvar( --kendo-line-height-lg, normal )var(--kendo-line-height-lg, normal)Default: var( --kendo-line-height-lg, normal )Computed: var(--kendo-line-height-lg, normal)
Description: The line-height of the height Breadcrumb.
kendo-breadcrumb-bgtransparent transparentDefault: transparentComputed: transparent
Description: The base background of the Breadcrumb.
kendo-breadcrumb-textk-color(on-app-surface)var(--kendo-color-on-app-surface, #3d3d3d)Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The base text color of the Breadcrumb.
kendo-breadcrumb-bordertransparent transparentDefault: transparentComputed: transparent
Description: The base border color of the Breadcrumb.
kendo-breadcrumb-focus-shadow0 0 2px 1px k-color(border)(0 0 2px 1px var(--kendo-color-border, rgba(0, 0, 0, 0.08)))Default: 0 0 2px 1px k-color(border)Computed: (0 0 2px 1px var(--kendo-color-border, rgba(0, 0, 0, 0.08)))
Description: The box shadow of the focused Breadcrumb.
kendo-breadcrumb-sm-link-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 small Breadcrumb link.
kendo-breadcrumb-md-link-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 medium Breadcrumb link.
kendo-breadcrumb-lg-link-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 large Breadcrumb link.
kendo-breadcrumb-sm-link-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 small Breadcrumb link.
kendo-breadcrumb-md-link-padding-yk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5, 0.375rem)
Description: The vertical padding of the medium Breadcrumb link.
kendo-breadcrumb-lg-link-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 large Breadcrumb link.
kendo-breadcrumb-link-border-radiusk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)Default: k-border-radius(md)Computed: var(--kendo-border-radius-md, 0.25rem)
Description: The border-radius of the Breadcrumb link.
kendo-breadcrumb-sm-icon-link-padding-yk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5, 0.375rem)
Description: The vertical padding of the small Breadcrumb link icon.
kendo-breadcrumb-md-icon-link-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 medium Breadcrumb link icon.
kendo-breadcrumb-lg-icon-link-padding-yk-spacing(3)var(--kendo-spacing-3, 0.75rem)Default: k-spacing(3)Computed: var(--kendo-spacing-3, 0.75rem)
Description: The vertical padding of the large Breadcrumb link icon.
kendo-breadcrumb-sm-icon-link-padding-x$kendo-breadcrumb-sm-icon-link-padding-yvar(--kendo-spacing-1\.5, 0.375rem)Default: $kendo-breadcrumb-sm-icon-link-padding-yComputed: var(--kendo-spacing-1\.5, 0.375rem)
Description: The horizontal padding of the small Breadcrumb link icon.
kendo-breadcrumb-md-icon-link-padding-x$kendo-breadcrumb-md-icon-link-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-breadcrumb-md-icon-link-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the medium Breadcrumb link icon.
kendo-breadcrumb-lg-icon-link-padding-x$kendo-breadcrumb-lg-icon-link-padding-yvar(--kendo-spacing-3, 0.75rem)Default: $kendo-breadcrumb-lg-icon-link-padding-yComputed: var(--kendo-spacing-3, 0.75rem)
Description: The horizontal padding of the large Breadcrumb link icon.
kendo-breadcrumb-link-initial-textinheritinheritDefault: inheritComputed: inherit
Description: The text color of the Breadcrumb link.
kendo-breadcrumb-link-icon-spacing$kendo-icon-spacingvar(--kendo-spacing-1, 0.25rem)Default: $kendo-icon-spacingComputed: var(--kendo-spacing-1, 0.25rem)
Description: The spacing of the Breadcrumb link icon.
kendo-breadcrumb-link-bgnullnullDefault: nullComputed: null
Description: The background color of the Breadcrumb link.
kendo-breadcrumb-link-textk-color( primary-on-surface)var(--kendo-color-primary-on-surface, #ff6358)Default: k-color( primary-on-surface)Computed: var(--kendo-color-primary-on-surface, #ff6358)
Description: The text color of the Breadcrumb link.
kendo-breadcrumb-link-bordernullnullDefault: nullComputed: null
Description: The border color of the Breadcrumb link.
kendo-breadcrumb-link-hover-bgtransparent transparentDefault: transparentComputed: transparent
Description: The background color of the hovered Breadcrumb link.
kendo-breadcrumb-link-hover-textcolor-mix(in srgb, k-color(primary-on-surface) 80%, k-color(on-app-surface))color-mix(in srgb, var(--kendo-color-primary-on-surface, #ff6358) 80%, var(--kendo-color-on-app-surface, #3d3d3d))Default: color-mix(in srgb, k-color(primary-on-surface) 80%, k-color(on-app-surface))Computed: color-mix(in srgb, var(--kendo-color-primary-on-surface, #ff6358) 80%, var(--kendo-color-on-app-surface, #3d3d3d))
Description: The text color of the hovered Breadcrumb link.
kendo-breadcrumb-link-hover-bordernullnullDefault: nullComputed: null
Description: The border color of the hovered Breadcrumb link.
kendo-breadcrumb-link-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the focused Breadcrumb link.
kendo-breadcrumb-link-focus-textk-color(primary)var(--kendo-color-primary, #ff6358)Default: k-color(primary)Computed: var(--kendo-color-primary, #ff6358)
Description: The text color of the focused Breadcrumb link.
kendo-breadcrumb-link-focus-bordernullnullDefault: nullComputed: null
Description: The border color of the focused Breadcrumb link.
kendo-breadcrumb-link-focus-shadowinset 0 0 0 2px k-color(border-alt)(inset 0 0 0 2px var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)))Default: inset 0 0 0 2px k-color(border-alt)Computed: (inset 0 0 0 2px var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)))
Description: The box shadow of the focused Breadcrumb link.
kendo-breadcrumb-root-link-bgnullnullDefault: nullComputed: null
Description: The background color of the Breadcrumb root link.
kendo-breadcrumb-root-link-textnullnullDefault: nullComputed: null
Description: The text color of the Breadcrumb root link.
kendo-breadcrumb-root-link-bordernullnullDefault: nullComputed: null
Description: The border color of the Breadcrumb root link.
kendo-breadcrumb-root-link-hover-bgtransparent transparentDefault: transparentComputed: transparent
Description: The background color of the hovered Breadcrumb root link.
kendo-breadcrumb-root-link-hover-textnullnullDefault: nullComputed: null
Description: The text color of the hovered Breadcrumb root link.
kendo-breadcrumb-root-link-hover-bordernullnullDefault: nullComputed: null
Description: The border color of the hovered Breadcrumb root link.
kendo-breadcrumb-root-link-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the focused Breadcrumb root link.
kendo-breadcrumb-root-link-focus-textnullnullDefault: nullComputed: null
Description: The text color of the focused Breadcrumb root link.
kendo-breadcrumb-root-link-focus-bordernullnullDefault: nullComputed: null
Description: The border color of the focused Breadcrumb root link.
kendo-breadcrumb-root-link-focus-shadow$kendo-breadcrumb-link-focus-shadow(inset 0 0 0 2px var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)))Default: $kendo-breadcrumb-link-focus-shadowComputed: (inset 0 0 0 2px var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)))
Description: The box shadow of the focused Breadcrumb root link.
kendo-breadcrumb-current-item-bgnullnullDefault: nullComputed: null
Description: The background color of the current Breadcrumb root link.
kendo-breadcrumb-current-item-textnullnullDefault: nullComputed: null
Description: The text color of the current Breadcrumb root link.
kendo-breadcrumb-current-item-bordernullnullDefault: nullComputed: null
Description: The border color of the current Breadcrumb root link.
kendo-breadcrumb-sizes
sm: "link-padding-x":"var(--kendo-spacing-2, 0.5rem)","link-padding-y":"var(--kendo-spacing-1, 0.25rem)","icon-link-padding-x":"var(--kendo-spacing-1\\.5, 0.375rem)","icon-link-padding-y":"var(--kendo-spacing-1\\.5, 0.375rem)","font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)"
md: "link-padding-x":"var(--kendo-spacing-2, 0.5rem)","link-padding-y":"var(--kendo-spacing-1\\.5, 0.375rem)","icon-link-padding-x":"var(--kendo-spacing-2, 0.5rem)","icon-link-padding-y":"var(--kendo-spacing-2, 0.5rem)","font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)"
lg: "link-padding-x":"var(--kendo-spacing-2, 0.5rem)","link-padding-y":"var(--kendo-spacing-2, 0.5rem)","icon-link-padding-x":"var(--kendo-spacing-3, 0.75rem)","icon-link-padding-y":"var(--kendo-spacing-3, 0.75rem)","font-size":"var(--kendo-font-size-lg, inherit)","line-height":"var(--kendo-line-height-lg, normal)"
Computed: (sm: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1, 0.25rem), icon-link-padding-x: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), md: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-x: var(--kendo-spacing-2, 0.5rem), icon-link-padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-2, 0.5rem), icon-link-padding-x: var(--kendo-spacing-3, 0.75rem), icon-link-padding-y: var(--kendo-spacing-3, 0.75rem), font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal)))
Description: The sizes map for the Breadcrumb.

Grid Variables

VariableDefault ValueComputed ValueValue
kendo-grid-border-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the border around the Grid.
kendo-grid-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the Grid.
kendo-grid-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the Grid.
kendo-grid-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The height of the Grid.
kendo-grid-padding-x$kendo-table-md-cell-padding-xvar(--kendo-spacing-3, 0.75rem)Default: $kendo-table-md-cell-padding-xComputed: var(--kendo-spacing-3, 0.75rem)
Description: The horizontal padding of the Grid.
kendo-grid-padding-y$kendo-table-md-cell-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-table-md-cell-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid.
kendo-grid-header-padding-x$kendo-grid-padding-xvar(--kendo-spacing-3, 0.75rem)Default: $kendo-grid-padding-xComputed: var(--kendo-spacing-3, 0.75rem)
Description: The horizontal padding of the Grid header.
kendo-grid-header-padding-y$kendo-grid-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid header.
kendo-grid-grouping-header-padding-x$kendo-grid-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid grouping header.
kendo-grid-grouping-header-padding-y$kendo-grid-grouping-header-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-grouping-header-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid grouping header.
kendo-grid-cell-padding-x$kendo-grid-padding-xvar(--kendo-spacing-3, 0.75rem)Default: $kendo-grid-padding-xComputed: var(--kendo-spacing-3, 0.75rem)
Description: The horizontal padding of the Grid cell.
kendo-grid-cell-padding-y$kendo-grid-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid cell.
kendo-grid-filter-cell-padding-x$kendo-grid-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid filter cell.
kendo-grid-filter-cell-padding-y$kendo-grid-filter-cell-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-filter-cell-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid filter cell.
kendo-grid-edit-cell-padding-x$kendo-grid-cell-padding-xvar(--kendo-spacing-3, 0.75rem)Default: $kendo-grid-cell-padding-xComputed: var(--kendo-spacing-3, 0.75rem)
Description: The horizontal padding of the Grid edit cell.
kendo-grid-edit-cell-padding-ycalc( #{k-spacing(1.5)} / 2 )calc(var(--kendo-spacing-1\.5, 0.375rem) / 2)Default: calc( #{k-spacing(1.5)} / 2 )Computed: calc(var(--kendo-spacing-1\.5, 0.375rem) / 2)
Description: The vertical padding of the Grid filter cell.
kendo-grid-group-drop-hint-size6px6pxDefault: 6pxComputed: 6px
Description: The drop hint size of the Grid group.
kendo-grid-group-drop-hint-line-sizemath.div( $kendo-grid-group-drop-hint-size, 3 )2pxDefault: math.div( $kendo-grid-group-drop-hint-size, 3 )Computed: 2px
Description: The drop hint line size of the Grid group.
kendo-grid-group-drop-hint-heightcalc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-drop-hint-size})calc(calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2) + 6px)Default: calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-drop-hint-size})Computed: calc(calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2) + 6px)
Description: The height of the Grid group.
kendo-grid-group-drop-hint-top3px3pxDefault: 3pxComputed: 3px
Description: The drop hint top of the Grid group.
kendo-grid-sm-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 Grid.
kendo-grid-sm-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 Grid.
kendo-grid-sm-header-padding-x$kendo-grid-sm-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-sm-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid header.
kendo-grid-sm-header-padding-y$kendo-grid-sm-padding-yvar(--kendo-spacing-1, 0.25rem)Default: $kendo-grid-sm-padding-yComputed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the Grid header.
kendo-grid-sm-grouping-header-padding-x$kendo-grid-sm-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-sm-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid header.
kendo-grid-sm-grouping-header-padding-y$kendo-grid-sm-padding-yvar(--kendo-spacing-1, 0.25rem)Default: $kendo-grid-sm-padding-yComputed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the Grid header.
kendo-grid-sm-cell-padding-x$kendo-grid-sm-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-sm-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid cell.
kendo-grid-sm-cell-padding-y$kendo-grid-sm-padding-yvar(--kendo-spacing-1, 0.25rem)Default: $kendo-grid-sm-padding-yComputed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the Grid cell.
kendo-grid-sm-filter-cell-padding-xk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5, 0.375rem)
Description: The horizontal padding of the Grid cell.
kendo-grid-sm-filter-cell-padding-y$kendo-grid-sm-filter-cell-padding-xvar(--kendo-spacing-1\.5, 0.375rem)Default: $kendo-grid-sm-filter-cell-padding-xComputed: var(--kendo-spacing-1\.5, 0.375rem)
Description: The vertical padding of the Grid cell.
kendo-grid-sm-edit-cell-padding-x$kendo-grid-sm-cell-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-sm-cell-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid cell.
kendo-grid-sm-edit-cell-padding-yk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5, 0.125rem)
Description: The vertical padding of the Grid cell.
kendo-grid-sm-group-dropclue-heightcalc( #{$kendo-chip-sm-calc-size} + #{$kendo-grid-group-drop-hint-size})calc(calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2) + 6px)Default: calc( #{$kendo-chip-sm-calc-size} + #{$kendo-grid-group-drop-hint-size})Computed: calc(calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2) + 6px)
Description: The height of the Grid group.
kendo-grid-sm-selection-aggregates-padding-x$kendo-grid-sm-padding-yvar(--kendo-spacing-1, 0.25rem)Default: $kendo-grid-sm-padding-yComputed: var(--kendo-spacing-1, 0.25rem)
Description: The horizontal padding of the Grid.
kendo-grid-sm-selection-aggregates-padding-y$kendo-grid-sm-padding-yvar(--kendo-spacing-1, 0.25rem)Default: $kendo-grid-sm-padding-yComputed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the Grid.
kendo-grid-md-padding-x$kendo-grid-padding-xvar(--kendo-spacing-3, 0.75rem)Default: $kendo-grid-padding-xComputed: var(--kendo-spacing-3, 0.75rem)
Description: The horizontal padding of the Grid.
kendo-grid-md-padding-y$kendo-grid-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid.
kendo-grid-md-header-padding-x$kendo-grid-header-padding-xvar(--kendo-spacing-3, 0.75rem)Default: $kendo-grid-header-padding-xComputed: var(--kendo-spacing-3, 0.75rem)
Description: The horizontal padding of the Grid header.
kendo-grid-md-header-padding-y$kendo-grid-header-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-header-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid header.
kendo-grid-md-grouping-header-padding-x$kendo-grid-grouping-header-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-grouping-header-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid header.
kendo-grid-md-grouping-header-padding-y$kendo-grid-grouping-header-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-grouping-header-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid header.
kendo-grid-md-cell-padding-x$kendo-grid-cell-padding-xvar(--kendo-spacing-3, 0.75rem)Default: $kendo-grid-cell-padding-xComputed: var(--kendo-spacing-3, 0.75rem)
Description: The horizontal padding of the Grid cell.
kendo-grid-md-cell-padding-y$kendo-grid-cell-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-cell-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid cell.
kendo-grid-md-filter-cell-padding-x$kendo-grid-filter-cell-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-filter-cell-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid cell.
kendo-grid-md-filter-cell-padding-y$kendo-grid-filter-cell-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-filter-cell-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid cell.
kendo-grid-md-edit-cell-padding-x$kendo-grid-edit-cell-padding-xvar(--kendo-spacing-3, 0.75rem)Default: $kendo-grid-edit-cell-padding-xComputed: var(--kendo-spacing-3, 0.75rem)
Description: The horizontal padding of the Grid cell.
kendo-grid-md-edit-cell-padding-y$kendo-grid-edit-cell-padding-ycalc(var(--kendo-spacing-1\.5, 0.375rem) / 2)Default: $kendo-grid-edit-cell-padding-yComputed: calc(var(--kendo-spacing-1\.5, 0.375rem) / 2)
Description: The vertical padding of the Grid cell.
kendo-grid-md-group-dropclue-height$kendo-grid-group-drop-hint-heightcalc(calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2) + 6px)Default: $kendo-grid-group-drop-hint-heightComputed: calc(calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2) + 6px)
Description: The height of the Grid group.
kendo-grid-md-selection-aggregates-padding-x$kendo-grid-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid.
kendo-grid-md-selection-aggregates-padding-y$kendo-grid-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid.
kendo-grid-sizes
sm: "header-padding-x":"var(--kendo-spacing-2, 0.5rem)","header-padding-y":"var(--kendo-spacing-1, 0.25rem)","grouping-header-padding-x":"var(--kendo-spacing-2, 0.5rem)","grouping-header-padding-y":"var(--kendo-spacing-1, 0.25rem)","cell-padding-x":"var(--kendo-spacing-2, 0.5rem)","cell-padding-y":"var(--kendo-spacing-1, 0.25rem)","filter-cell-padding-x":"var(--kendo-spacing-1\\.5, 0.375rem)","filter-cell-padding-y":"var(--kendo-spacing-1\\.5, 0.375rem)","edit-cell-padding-x":"var(--kendo-spacing-2, 0.5rem)","edit-cell-padding-y":"var(--kendo-spacing-0\\.5, 0.125rem)","button-padding-y":"var(--kendo-spacing-0\\.5, 0.125rem)","button-calc-size":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\\.5, 0.125rem) * 2 + 1px * 2)","group-dropclue-height":"calc(calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-0\\.5, 0.125rem) * 2 + 1px * 2) + 6px)","selection-aggregates-padding-x":"var(--kendo-spacing-1, 0.25rem)","selection-aggregates-padding-y":"var(--kendo-spacing-1, 0.25rem)"
md: "header-padding-x":"var(--kendo-spacing-3, 0.75rem)","header-padding-y":"var(--kendo-spacing-2, 0.5rem)","grouping-header-padding-x":"var(--kendo-spacing-2, 0.5rem)","grouping-header-padding-y":"var(--kendo-spacing-2, 0.5rem)","cell-padding-x":"var(--kendo-spacing-3, 0.75rem)","cell-padding-y":"var(--kendo-spacing-2, 0.5rem)","filter-cell-padding-x":"var(--kendo-spacing-2, 0.5rem)","filter-cell-padding-y":"var(--kendo-spacing-2, 0.5rem)","edit-cell-padding-x":"var(--kendo-spacing-3, 0.75rem)","edit-cell-padding-y":"calc(var(--kendo-spacing-1\\.5, 0.375rem) / 2)","button-padding-y":"var(--kendo-spacing-1, 0.25rem)","button-calc-size":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)","group-dropclue-height":"calc(calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2) + 6px)","selection-aggregates-padding-x":"var(--kendo-spacing-2, 0.5rem)","selection-aggregates-padding-y":"var(--kendo-spacing-2, 0.5rem)"
Computed: (sm: (header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1, 0.25rem), grouping-header-padding-x: var(--kendo-spacing-2, 0.5rem), grouping-header-padding-y: var(--kendo-spacing-1, 0.25rem), cell-padding-x: var(--kendo-spacing-2, 0.5rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem), filter-cell-padding-x: var(--kendo-spacing-1\.5, 0.375rem), filter-cell-padding-y: var(--kendo-spacing-1\.5, 0.375rem), edit-cell-padding-x: var(--kendo-spacing-2, 0.5rem), edit-cell-padding-y: var(--kendo-spacing-0\.5, 0.125rem), button-padding-y: var(--kendo-spacing-0\.5, 0.125rem), button-calc-size: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2), group-dropclue-height: calc(calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2) + 6px), selection-aggregates-padding-x: var(--kendo-spacing-1, 0.25rem), selection-aggregates-padding-y: var(--kendo-spacing-1, 0.25rem)), md: (header-padding-x: var(--kendo-spacing-3, 0.75rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), grouping-header-padding-x: var(--kendo-spacing-2, 0.5rem), grouping-header-padding-y: var(--kendo-spacing-2, 0.5rem), cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-2, 0.5rem), filter-cell-padding-x: var(--kendo-spacing-2, 0.5rem), filter-cell-padding-y: var(--kendo-spacing-2, 0.5rem), edit-cell-padding-x: var(--kendo-spacing-3, 0.75rem), edit-cell-padding-y: calc(var(--kendo-spacing-1\.5, 0.375rem) / 2), button-padding-y: var(--kendo-spacing-1, 0.25rem), button-calc-size: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2), group-dropclue-height: calc(calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2) + 6px), selection-aggregates-padding-x: var(--kendo-spacing-2, 0.5rem), selection-aggregates-padding-y: var(--kendo-spacing-2, 0.5rem)))
Description: The sizes of the Grid.
kendo-grid-header-font-sizenullnullDefault: nullComputed: null
Description: The font size of the Grid header.
kendo-grid-header-first-border1px1pxDefault: 1pxComputed: 1px
Description: The border color of the Grid header.
kendo-grid-header-menu-icon-spacing$kendo-icon-spacingvar(--kendo-spacing-1, 0.25rem)Default: $kendo-icon-spacingComputed: var(--kendo-spacing-1, 0.25rem)
Description: The spacing of the Grid header.
kendo-grid-toolbar-border-width$kendo-grid-border-width1pxDefault: $kendo-grid-border-widthComputed: 1px
Description: The width of the border around the Grid toolbar.
kendo-grid-cell-horizontal-border-width$kendo-table-cell-horizontal-border-width0pxDefault: $kendo-table-cell-horizontal-border-widthComputed: 0px
Description: The width of the border around the Grid cell.
kendo-grid-cell-vertical-border-width$kendo-table-cell-vertical-border-width1pxDefault: $kendo-table-cell-vertical-border-widthComputed: 1px
Description: The width of the border around the Grid cell.
kendo-grid-bg$kendo-table-bgvar(--kendo-color-surface-alt, #ffffff)Default: $kendo-table-bgComputed: var(--kendo-color-surface-alt, #ffffff)
Description: The background color of the Grid.
kendo-grid-text$kendo-table-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-table-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the Grid.
kendo-grid-border$kendo-table-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-table-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the Grid.
kendo-grid-header-bg$kendo-table-header-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-table-header-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of Grid header.
kendo-grid-header-text$kendo-table-header-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-table-header-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of Grid header.
kendo-grid-header-border$kendo-table-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-table-header-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of Grid header.
kendo-grid-footer-bg$kendo-grid-header-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-grid-header-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of Grid footer.
kendo-grid-footer-text$kendo-grid-header-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-grid-header-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of Grid footer.
kendo-grid-footer-border$kendo-grid-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-grid-header-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of Grid footer.
kendo-grid-alt-bg$kendo-table-alt-row-bgcolor-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent)Default: $kendo-table-alt-row-bgComputed: color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent)
Description: The background color of the Grid alternating rows.
kendo-grid-hover-bg$kendo-table-hover-bgcolor-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent)Default: $kendo-table-hover-bgComputed: color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent)
Description: The background color of hovered Grid rows.
kendo-grid-hover-text$kendo-table-hover-textnullDefault: $kendo-table-hover-textComputed: null
Description: The text color of hovered Grid rows.
kendo-grid-selected-bg$kendo-table-selected-bgcolor-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)Default: $kendo-table-selected-bgComputed: color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)
Description: The background color of selected Grid rows.
kendo-grid-selected-text$kendo-table-selected-textnullDefault: $kendo-table-selected-textComputed: null
Description: The text color of selected Grid rows.
kendo-grid-highlighted-bg$kendo-table-highlighted-bgcolor-mix(in srgb, var(--kendo-color-warning, #ffc000) 25%, transparent)Default: $kendo-table-highlighted-bgComputed: color-mix(in srgb, var(--kendo-color-warning, #ffc000) 25%, transparent)
Description: The background color of highlighted Grid rows.
kendo-grid-highlighted-font-weight$kendo-table-highlighted-font-weightvar(--kendo-font-weight-bold, bold)Default: $kendo-table-highlighted-font-weightComputed: var(--kendo-font-weight-bold, bold)
Description: The font weight of highlighted Grid rows.
kendo-grid-selected-highlighted-bg$kendo-table-selected-highlighted-bgcolor-mix(in srgb, color-mix(in srgb, var(--kendo-color-primary, #ff6358), var(--kendo-color-warning, #ffc000)) 42%, transparent)Default: $kendo-table-selected-highlighted-bgComputed: color-mix(in srgb, color-mix(in srgb, var(--kendo-color-primary, #ff6358), var(--kendo-color-warning, #ffc000)) 42%, transparent)
Description: The background color of selected highlighted Grid rows.
kendo-grid-selection-aggregates-bg$kendo-grid-header-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-grid-header-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of the Grid selection aggregates container.
kendo-grid-selection-aggregates-text$kendo-grid-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-grid-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the Grid selection aggregates container.
kendo-grid-selection-aggregates-border$kendo-grid-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-grid-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the Grid selection aggregates container.
kendo-grid-selection-aggregates-border-width$kendo-grid-border-width1pxDefault: $kendo-grid-border-widthComputed: 1px
Description: The border width of the Grid selection aggregates container.
kendo-grid-selection-aggregates-spacingk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The spacing between the selection aggregates items.
kendo-grid-selection-aggregates-line-height$kendo-grid-line-heightvar(--kendo-line-height, normal)Default: $kendo-grid-line-heightComputed: var(--kendo-line-height, normal)
Description: The line height of the Grid selection aggregates container.
kendo-grid-selection-aggregates-font-weightvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)Default: var( --kendo-font-weight-bold, normal )Computed: var(--kendo-font-weight-bold, normal)
Description: The font weight of the Grid selection aggregates container.
kendo-grid-grouping-row-bgk-color(surface)var(--kendo-color-surface, #fafafa)Default: k-color(surface)Computed: var(--kendo-color-surface, #fafafa)
Description: The background color of the Grid row.
kendo-grid-grouping-row-text$kendo-grid-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-grid-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the Grid row.
kendo-grid-sorted-icon-spacingcalc( #{k-spacing(2)} - 1px )calc(var(--kendo-spacing-2, 0.5rem) - 1px)Default: calc( #{k-spacing(2)} - 1px )Computed: calc(var(--kendo-spacing-2, 0.5rem) - 1px)
Description: The sorted icon spacing of the Grid.
kendo-grid-sorted-bgcolor-mix(in srgb, k-color(on-app-surface) 3%, transparent)color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 3%, transparent)Default: color-mix(in srgb, k-color(on-app-surface) 3%, transparent)Computed: color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 3%, transparent)
Description: The background color of the Grid.
kendo-grid-sorting-indicator-textk-color(primary)var(--kendo-color-primary, #ff6358)Default: k-color(primary)Computed: var(--kendo-color-primary, #ff6358)
Description: The text color of the Grid.
kendo-grid-sorting-index-font-sizevar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit)
Description: The font size of the Grid.
kendo-grid-sorting-index-spacing-ycalc( #{$kendo-icon-spacing} / 2 )calc(var(--kendo-spacing-1, 0.25rem) / 2)Default: calc( #{$kendo-icon-spacing} / 2 )Computed: calc(var(--kendo-spacing-1, 0.25rem) / 2)
Description: The spacing of the Grid.
kendo-grid-sorting-index-spacing-xcalc( #{$kendo-grid-sorting-index-spacing-y} * -1)calc(calc(var(--kendo-spacing-1, 0.25rem) / 2) * -1)Default: calc( #{$kendo-grid-sorting-index-spacing-y} * -1)Computed: calc(calc(var(--kendo-spacing-1, 0.25rem) / 2) * -1)
Description: The vertical spacing of the Grid.
kendo-grid-focus-shadow$kendo-table-focus-shadow(inset 0 0 0 2px var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)))Default: $kendo-table-focus-shadowComputed: (inset 0 0 0 2px var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)))
Description: The shadow of the Grid.
kendo-grid-command-cell-button-spacingk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The spacing of the Grid button.
kendo-grid-sticky-bgk-color(surface-alt)var(--kendo-color-surface-alt, #ffffff)Default: k-color(surface-alt)Computed: var(--kendo-color-surface-alt, #ffffff)
Description: The background color of the sticky content in the Grid.
kendo-grid-sticky-hover-bgk-color(base-hover)var(--kendo-color-base-hover, #ebebeb)Default: k-color(base-hover)Computed: var(--kendo-color-base-hover, #ebebeb)
Description: The background color of the hovered sticky content in the Grid.
kendo-grid-sticky-alt-bgk-color(base)var(--kendo-color-base, #f5f5f5)Default: k-color(base)Computed: var(--kendo-color-base, #f5f5f5)
Description: The alternate background color of the sticky content in the Grid.
kendo-grid-sticky-borderrgba( black, .3 ) rgba(0, 0, 0, 0.3)Default: rgba( black, .3 )Computed: rgba(0, 0, 0, 0.3)
Description: The border color of the sticky content in the Grid.
kendo-grid-sticky-header-bg$kendo-grid-header-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-grid-header-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of the sticky header in the Grid.
kendo-grid-sticky-header-text$kendo-grid-header-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-grid-header-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the sticky header in the Grid.
kendo-grid-sticky-header-border$kendo-grid-sticky-border rgba(0, 0, 0, 0.3)Default: $kendo-grid-sticky-borderComputed: rgba(0, 0, 0, 0.3)
Description: The border color of the sticky header in the Grid.
kendo-grid-sticky-footer-bg$kendo-grid-header-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-grid-header-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of the sticky footer in the Grid.
kendo-grid-column-menu-width230px230pxDefault: 230pxComputed: 230px
Description: The width of the Grid column menu.
kendo-grid-column-menu-max-width320px320pxDefault: 320pxComputed: 320px
Description: The maximum width of the Grid column menu.
kendo-grid-column-menu-popup-padding-xnullnullDefault: nullComputed: null
Description: The horizontal padding of the Grid popup.
kendo-grid-column-menu-popup-padding-ynullnullDefault: nullComputed: null
Description: The vertical padding of the Grid popup.
kendo-grid-column-menu-item-padding-x$kendo-menu-popup-md-item-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-menu-popup-md-item-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid item.
kendo-grid-column-menu-item-padding-y$kendo-menu-popup-md-item-padding-yvar(--kendo-spacing-1, 0.25rem)Default: $kendo-menu-popup-md-item-padding-yComputed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the Grid item.
kendo-grid-column-menu-list-item-padding-x$kendo-list-md-item-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-list-md-item-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid item.
kendo-grid-column-menu-list-item-padding-y$kendo-list-md-item-padding-yvar(--kendo-spacing-1, 0.25rem)Default: $kendo-list-md-item-padding-yComputed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the Grid item.
kendo-grid-column-menu-items-wrap-padding-xk-spacing(0)var(--kendo-spacing-0, 0px)Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px)
Description: The horizontal padding of the Grid.
kendo-grid-column-menu-items-wrap-padding-yk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5, 0.375rem)
Description: The vertical padding of the Grid.
kendo-grid-column-menu-group-header-padding-x$kendo-menu-popup-md-item-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-menu-popup-md-item-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid header.
kendo-grid-column-menu-group-header-padding-y$kendo-menu-popup-md-item-padding-yvar(--kendo-spacing-1, 0.25rem)Default: $kendo-menu-popup-md-item-padding-yComputed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the Grid header.
kendo-grid-column-menu-group-header-font-sizevar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit)
Description: The font size of the Grid header.
kendo-grid-column-menu-group-header-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The height of the Grid header.
kendo-grid-column-menu-group-header-text-transformuppercaseuppercaseDefault: uppercaseComputed: uppercase
Description: The text color of the Grid header.
kendo-grid-column-menu-group-header-border-bottom-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the Grid header.
kendo-grid-column-menu-group-header-bgnullnullDefault: nullComputed: null
Description: The background color of the Grid header.
kendo-grid-column-menu-group-header-text$kendo-popup-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-popup-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the Grid header.
kendo-grid-column-menu-group-header-border$kendo-popup-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-popup-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the Grid header.
kendo-grid-column-menu-tabbed-tabstrip-content-padding-xk-spacing(0)var(--kendo-spacing-0, 0px)Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px)
Description: The horizontal padding of the Grid content.
kendo-grid-column-menu-tabbed-tabstrip-content-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 Grid content.
kendo-grid-column-menu-tabbed-bgk-color(surface)var(--kendo-color-surface, #fafafa)Default: k-color(surface)Computed: var(--kendo-color-surface, #fafafa)
Description: The background color of the Grid.
kendo-grid-drag-cell-width($kendo-icon-size * 2.25)36pxDefault: ($kendo-icon-size * 2.25)Computed: 36px
Description: The width of the Grid cell.
kendo-grid-hierarchy-col-width($kendo-icon-size * 2)32pxDefault: ($kendo-icon-size * 2)Computed: 32px
Description: The width of the Grid.
kendo-grid-grouping-row-border-top1px1pxDefault: 1pxComputed: 1px
Description: The grouping border top of the Grid row.
kendo-grid-group-footer-border-y1px1pxDefault: 1pxComputed: 1px
Description: The vertical border of the Grid footer.
kendo-grid-row-resizer-hover-bgcolor-mix(in srgb, k-color(on-base) 20%, transparent)color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 20%, transparent)Default: color-mix(in srgb, k-color(on-base) 20%, transparent)Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 20%, transparent)
Description: The background color of the Grid row resize indicator.
kendo-grid-row-resizer-active-bgk-color(primary)var(--kendo-color-primary, #ff6358)Default: k-color(primary)Computed: var(--kendo-color-primary, #ff6358)
Description: The background color of the active Grid row resize indicator.
kendo-grid-row-resizer-heightk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5, 0.125rem)
Description: The height of the Grid row resize indicator.
kendo-grid-stack-cell-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 Grid stack layout cells.
kendo-grid-stack-cell-padding-yk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5, 0.375rem)
Description: The vertical padding of the Grid stack layout cells.
kendo-grid-stack-column-gapk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The column gap of the Grid stack layout.
kendo-grid-stack-editable-column-gapk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The column gap of the editable Grid stack layout.
kendo-grid-stack-hierarchy-col-widthk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The width of the hierarchy column in the Grid stack layout.
kendo-grid-stack-header-font-sizevar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit)
Description: The font size of the Grid stack layout column header.
kendo-grid-stack-header-font-weightvar( --kendo-font-weight-bold, bold )var(--kendo-font-weight-bold, bold)Default: var( --kendo-font-weight-bold, bold )Computed: var(--kendo-font-weight-bold, bold)
Description: The font weight of the Grid stack layout column header.
kendo-grid-stack-expandable-shadow-heightk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)Default: k-spacing(2.5)Computed: var(--kendo-spacing-2\.5, 0.625rem)
Description: The height of the Grid stack layout expandable row shadow.
kendo-grid-stack-header-colork-color(subtle)var(--kendo-color-subtle, #666666)Default: k-color(subtle)Computed: var(--kendo-color-subtle, #666666)
Description: The color of the Grid stack layout column header.
kendo-grid-stack-focus-outlinecolor-mix(in srgb, k-color(on-app-surface) 12%, transparent)color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 12%, transparent)Default: color-mix(in srgb, k-color(on-app-surface) 12%, transparent)Computed: color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 12%, transparent)
Description: The outline color of the Grid stack layout focused cell.
kendo-grid-stack-expandable-shadowk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))Default: k-elevation(2)Computed: var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description: The Grid stack layout expandable row shadow.

On this page

Progress Logo

Copyright © 2025 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.

Progress and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings. All rights in any other trademarks contained herein are reserved by their respective owners and their inclusion does not imply an endorsement, affiliation, or sponsorship as between Progress and the respective owners.

Terms of UsePrivacy CenterSecurity
Center TrademarksLicense Agreements
Code of ConductDoc Copyright
Feedback