New to Kendo UI for Vue? Start a free 30-day trial
Customizing Grid
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-grid-border-width | 1px | ||
Description
Border width of the grid. | |||
| $kendo-grid-border-style | solid | ||
Description
Border style of the grid. | |||
| $kendo-grid-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the grid. | |||
| $kendo-grid-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the grid. | |||
| $kendo-grid-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the grid. | |||
| $kendo-grid-padding-x | $kendo-table-cell-padding-x | ||
Description
Horizontal padding of the grid. | |||
| $kendo-grid-padding-y | $kendo-table-cell-padding-y | ||
Description
Vertical padding of the grid. | |||
| $kendo-grid-header-padding-x | $kendo-grid-padding-x | ||
Description
Horizontal padding of the grid header. | |||
| $kendo-grid-header-padding-y | $kendo-grid-padding-y | ||
Description
Vertical padding of the grid header. | |||
| $kendo-grid-grouping-header-padding-x | $kendo-toolbar-md-padding-x | ||
Description
Horizontal padding of the grid grouping header. | |||
| $kendo-grid-grouping-header-padding-y | $kendo-toolbar-md-padding-y | ||
Description
Vertical padding of the grid grouping header. | |||
| $kendo-grid-cell-padding-x | $kendo-grid-padding-x | ||
Description
Horizontal padding of the grid cell. | |||
| $kendo-grid-cell-padding-y | $kendo-grid-padding-y | ||
Description
Vertical padding of the grid cell. | |||
| $kendo-grid-filter-cell-padding-x | $kendo-grid-padding-y | ||
Description
Horizontal padding of the grid filter cell. | |||
| $kendo-grid-filter-cell-padding-y | $kendo-grid-filter-cell-padding-x | ||
Description
Vertical padding of the grid filter cell. | |||
| $kendo-grid-edit-cell-padding-x | $kendo-grid-cell-padding-x | ||
Description
Horizontal padding of the grid edit cells. | |||
| $kendo-grid-edit-cell-padding-y | 5px | ||
Description
Vertical padding of the grid edit cells. | |||
| $kendo-grid-group-drop-hint-size | 6px | ||
Description
Size of the grid group drop clue. | |||
| $kendo-grid-group-drop-hint-line-size | 1px | ||
Description
Line size of the grid group drop clue. | |||
| $kendo-grid-group-drop-hint-dot-size | $kendo-grid-group-drop-hint-size | ||
Description
Dot size of the grid group drop clue. | |||
| $kendo-grid-group-drop-hint-height | calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-drop-hint-size} ) | ||
Description
Height of the grid group drop clue. | |||
| $kendo-grid-group-drop-hint-top | 2px | ||
Description
Top offset of the grid group drop clue. | |||
| $kendo-grid-bg | $kendo-table-bg | ||
Description
Background color of the grid. | |||
| $kendo-grid-text | $kendo-table-text | ||
Description
Text color of the grid. | |||
| $kendo-grid-border | $kendo-table-border | ||
Description
Border color of the grid. | |||
| $kendo-grid-focus-shadow | $kendo-list-item-focus-shadow | ||
Description
Focus shadow of the grid. | |||
| $kendo-grid-alt-bg | $kendo-table-alt-row-bg | ||
Description
Background color of alternating rows in grid. | |||
| $kendo-grid-alt-text | $kendo-table-alt-row-text | ||
Description
Text color of alternating rows in grid. | |||
| $kendo-grid-alt-border | $kendo-table-alt-row-border | ||
Description
Border color of alternating rows in grid. | |||
| $kendo-grid-hover-bg | $kendo-table-hover-bg | ||
Description
Background color of hover rows in grid. | |||
| $kendo-grid-hover-text | $kendo-table-hover-text | ||
Description
Text color of hover rows in grid. | |||
| $kendo-grid-hover-border | $kendo-table-hover-border | ||
Description
Border color of hover rows in grid. | |||
| $kendo-grid-selected-bg | $kendo-table-selected-bg | ||
Description
Background color of selected rows in grid. | |||
| $kendo-grid-selected-text | $kendo-table-selected-text | ||
Description
Text color of selected rows in grid. | |||
| $kendo-grid-selected-border | $kendo-table-selected-border | ||
Description
Border color of selected rows in grid. | |||
| $kendo-grid-selected-hover-bg | $kendo-table-selected-hover-bg | ||
Description
Hover background color of selected rows in grid. | |||
| $kendo-grid-selected-hover-text | $kendo-table-selected-hover-text | ||
Description
Hover text color of selected rows in grid. | |||
| $kendo-grid-selected-hover-border | $kendo-table-selected-hover-border | ||
Description
Hover border color of selected rows in grid. | |||
| $kendo-grid-header-border-width-y | $kendo-grid-border-width | ||
Description
Vertical border width of the grid header. | |||
| $kendo-grid-header-border-width-x | 0 | ||
Description
Horizontal border width of the grid header. | |||
| $kendo-grid-header-font-size | inherit | ||
Description
Font size of the grid header. | |||
| $kendo-grid-header-font-weight | var( --kendo-font-weight-bold, normal ) | ||
Description
Font weight of the grid header. | |||
| $kendo-grid-header-menu-spacing | var( --kendo-icon-spacing, .5rem ) | ||
Description
Menu spacing of the grid header. | |||
| $kendo-grid-header-first-border-width | $kendo-grid-border-width | ||
Description
Border width of the first cell in the grid header. | |||
| $kendo-grid-header-bg | $kendo-table-header-bg | ||
Description
Background color of grid header. | |||
| $kendo-grid-header-text | $kendo-table-header-text | ||
Description
Text color of grid header. | |||
| $kendo-grid-header-border | $kendo-table-header-border | ||
Description
Border color of grid header. | |||
| $kendo-grid-header-icon-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
Background color of grid header icons. | |||
| $kendo-grid-footer-bg | $kendo-table-footer-bg | ||
| $kendo-grid-footer-text | $kendo-table-footer-text | ||
Description
Text color of grid footer. | |||
| $kendo-grid-footer-border | $kendo-table-footer-border | ||
Description
Border color of grid footer. | |||
| $kendo-grid-selection-aggregates-bg | $kendo-toolbar-bg | ||
Description
Background color of the selection aggregates container | |||
| $kendo-grid-selection-aggregates-text | $kendo-grid-text | ||
Description
Text color of the selection aggregates container | |||
| $kendo-grid-selection-aggregates-border | $kendo-grid-border | ||
Description
Border color of the selection aggregates container | |||
| $kendo-grid-selection-aggregates-border-width | $kendo-grid-border-width | ||
Description
Border width of the selection aggregates container | |||
| $kendo-grid-selection-aggregates-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
Spacing between the selection aggregates items | |||
| $kendo-grid-selection-aggregates-line-height | $kendo-grid-line-height | ||
Description
Line height of the selection aggregates container | |||
| $kendo-grid-selection-aggregates-font-weight | $kendo-font-weight-bold | ||
Description
Font weight of the selection aggregates container | |||
| $kendo-grid-grouping-header-bg | $kendo-toolbar-bg | ||
Description
Background color of the grid grouping header. | |||
| $kendo-grid-grouping-header-text | $kendo-toolbar-text | ||
Description
Text color of the grid grouping header. | |||
| $kendo-grid-grouping-header-border | $kendo-toolbar-border | ||
Description
Border color of the grid grouping header. | |||
| $kendo-grid-grouping-row-border-width-y | $kendo-grid-border-width | ||
Description
Vertical border width of the grid grouping row. | |||
| $kendo-grid-grouping-row-bg | $kendo-table-group-row-bg | ||
Description
Background color of the grid grouping row. | |||
| $kendo-grid-grouping-row-text | $kendo-table-group-row-text | ||
Description
Text color of the grid grouping row. | |||
| $kendo-grid-grouping-row-border | $kendo-table-group-row-border | ||
Description
Border color of the grid grouping row. | |||
| $kendo-grid-filter-cell-padding-x | $kendo-grid-padding-y | ||
Description
Horizontal padding of the grid filter cell. | |||
| $kendo-grid-filter-cell-padding-y | $kendo-grid-filter-cell-padding-x | ||
Description
Vertical padding of the grid filter cell. | |||
| $kendo-grid-toolbar-padding-x | $kendo-toolbar-md-padding-x | ||
Description
Horizontal padding of the grid toolbar. | |||
| $kendo-grid-toolbar-padding-y | $kendo-toolbar-md-padding-y | ||
Description
Vertical padding of the grid toolbar. | |||
| $kendo-grid-toolbar-spacing | $kendo-toolbar-md-spacing | ||
Description
Spacing of the grid toolbar. | |||
| $kendo-grid-toolbar-border-width | $kendo-grid-border-width | ||
Description
Border width of the grid toolbar. | |||
| $kendo-grid-cell-border-width-y | $kendo-grid-border-width | ||
Description
Vertical border width of the grid cell. | |||
| $kendo-grid-cell-border-width-x | 0px | ||
Description
Horizontal border width of the grid cell. | |||
| $kendo-grid-sort-index-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the grid sort index. | |||
| $kendo-grid-sort-index-height | var( --kendo-icon-size, 1rem ) | ||
Description
Default height of the grid sort index. | |||
| $kendo-grid-sort-index-spacing-y | calc( var( --kendo-icon-spacing, .5rem ) / 4 ) | ||
Description
Horizontal offset of the grid sort index. | |||
| $kendo-grid-sort-index-spacing-x | map.get( $kendo-spacing, 0.5 ) | ||
Description
Vertical offset of the grid sort index. | |||
| $kendo-grid-sort-icon-spacing | var( --kendo-icon-lg-spacing, .5rem ) | ||
Description
Spacing of the grid sort icon. | |||
| $kendo-grid-sort-indicator-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
Text color of the grid sort indicator. | |||
| $kendo-grid-sort-indicator-order-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Text color of the grid sort order indicator. | |||
| $kendo-grid-sorted-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
Background color of the sorted grid cells. | |||
| $kendo-grid-command-cell-padding-y | calc( #{$kendo-table-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em} ) / 2 ) | ||
Description
Horizontal padding of the grid command cells. | |||
| $kendo-grid-command-cell-button-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the grid command cells. | |||
| $kendo-grid-group-indicator-padding-x | $kendo-button-md-padding-x | ||
Description
Horizontal padding of the grid group indicator. | |||
| $kendo-grid-group-indicator-padding-y | $kendo-button-md-padding-y | ||
Description
Vertical padding of the grid group indicator. | |||
| $kendo-grid-group-indicator-border-width | $kendo-button-border-width | ||
Description
Border width of the grid group indicator. | |||
| $kendo-grid-group-indicator-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
Border radius of the grid group indicator. | |||
| $kendo-grid-group-indicator-gap | $kendo-table-cell-padding-y | ||
Description
Spacing of the grid group indicator. | |||
| $kendo-grid-group-indicator-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the grid group indicator. | |||
| $kendo-grid-group-indicator-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the grid group indicator. | |||
| $kendo-grid-group-indicator-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
Border color of the grid group indicator. | |||
| $kendo-grid-group-indicator-icon-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
Text color of the grid group indicator icon. | |||
| $kendo-grid-group-footer-border-width-y | 0px | ||
Description
Horizontal border width of the grid group footer. | |||
| $kendo-grid-group-footer-border-width-x | 0px | ||
Description
Vertical border width of the grid group footer. | |||
| $kendo-grid-group-drop-hint-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Text color of the grid group drop clue. | |||
| $kendo-grid-sticky-cell-border-width | $kendo-grid-border-width | ||
Description
Border width of the grid sticky cell. | |||
| $kendo-grid-sticky-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the grid sticky cell. | |||
| $kendo-grid-sticky-text | $kendo-grid-text | ||
Description
Text color of the grid sticky cell. | |||
| $kendo-grid-sticky-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 80%, transparent), k-get-theme-color-var( neutral-90 )) | ||
Description
Border color of the grid sticky cell. | |||
| $kendo-grid-sticky-alt-bg | $kendo-grid-sticky-bg | ||
Description
Alt background color of the grid sticky cell. | |||
| $kendo-grid-sticky-hover-bg | $kendo-grid-hover-bg | ||
Description
Hover background color of the grid sticky cell. | |||
| $kendo-grid-sticky-header-bg | $kendo-grid-header-bg | ||
Description
Background color of the grid sticky header. | |||
| $kendo-grid-sticky-header-text | $kendo-grid-header-text | ||
Description
Text color of the grid sticky header. | |||
| $kendo-grid-sticky-header-border | $kendo-grid-sticky-border | ||
Description
Border color of the grid sticky header. | |||
| $kendo-grid-sticky-footer-bg | $kendo-grid-header-bg | ||
Description
Background color of the grid sticky footer. | |||
| $kendo-grid-sticky-footer-hover-bg | $kendo-grid-hover-bg | ||
Description
Hover background color of the grid sticky footer. | |||
| $kendo-grid-sticky-selected-bg | $kendo-grid-selected-bg | ||
Description
Selected background color of the grid sticky cells. | |||
| $kendo-grid-sticky-selected-alt-bg | $kendo-grid-sticky-selected-bg | ||
Description
Alt selected background color of the grid sticky cells. | |||
| $kendo-grid-sticky-selected-hover-bg | if($kendo-enable-color-system, $kendo-grid-sticky-selected-bg, $kendo-grid-selected-hover-bg) | ||
Description
Selected hover background color of the grid sticky cells. | |||
| $kendo-filter-menu-container-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the grid filter menu container. | |||
| $kendo-filter-menu-container-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding of the grid filter menu container. | |||
| $kendo-grid-column-menu-width | 230px | ||
Description
Default width of the grid column menu. | |||
| $kendo-grid-column-menu-max-width | 320px | ||
Description
Max width of the grid column menu. | |||
| $kendo-grid-column-menu-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
Spacing of the grid column menu. | |||
| $kendo-grid-column-menu-shadow | var( --kendo-box-shadow-depth-4, none ) | ||
Description
Focus shadow of the grid column menu. | |||
| $kendo-grid-column-menu-bg | var( --kendo-component-bg, inherit ) | ||
Description
Background color of the grid column menu. | |||
| $kendo-grid-column-menu-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the grid column menu. | |||
| $kendo-grid-column-menu-border | var( --kendo-component-border, inherit ) | ||
Description
Border color of the grid column menu. | |||
| $kendo-grid-column-menu-multicheck-font-size | $kendo-list-md-font-size | ||
Description
Font size of the grid column menu checkbox container. | |||
| $kendo-grid-column-menu-multicheck-line-height | $kendo-list-md-line-height | ||
Description
Line height of the grid column menu checkbox container. | |||
| $kendo-grid-column-menu-items-wrap-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the grid column menu items wrap. | |||
| $kendo-grid-column-menu-items-wrap-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal padding of the grid column menu items wrap. | |||
| $kendo-grid-column-menu-item-padding-y | $kendo-list-md-item-padding-y | ||
Description
Horizontal padding of the grid column menu item. | |||
| $kendo-grid-column-menu-item-padding-x | $kendo-list-md-item-padding-x | ||
Description
Vertical padding of the grid column menu item. | |||
| $kendo-grid-column-menu-item-gap | $kendo-list-md-item-padding-x | ||
Description
Spacing of the grid column menu item. | |||
| $kendo-grid-column-menu-item-icon-spacing | var( --kendo-icon-spacing, .5rem ) | ||
Description
Icon spacing of the grid column menu item. | |||
| $kendo-grid-column-menu-item-bg | $kendo-list-item-bg | ||
Description
Background color of the grid column menu item. | |||
| $kendo-grid-column-menu-item-text | $kendo-list-item-text | ||
Description
Text color of the grid column menu item. | |||
| $kendo-grid-column-menu-item-hover-bg | $kendo-list-item-hover-bg | ||
Description
Hover background color of the grid column menu item. | |||
| $kendo-grid-column-menu-item-hover-text | $kendo-list-item-hover-text | ||
Description
Hover text color of the grid column menu item. | |||
| $kendo-grid-column-menu-item-selected-bg | $kendo-list-item-selected-bg | ||
Description
Selected background color of the grid column menu item. | |||
| $kendo-grid-column-menu-item-selected-text | $kendo-list-item-selected-text | ||
Description
Selected text color of the grid column menu item. | |||
| $kendo-grid-column-menu-item-focus-shadow | $kendo-list-item-focus-shadow | ||
Description
Focus shadow of the grid column menu item. | |||
| $kendo-grid-column-menu-item-icon-text | $kendo-list-item-icon-text | ||
Description
Text color of the grid column menu item icon. | |||
| $kendo-grid-column-menu-group-header-padding-y | $kendo-grid-column-menu-item-padding-y | ||
Description
Vertical padding of the grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-padding-x | $kendo-grid-column-menu-item-padding-x | ||
Description
Horizontal padding of the grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-border-width | 1px | ||
Description
Border width of the grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-border-style | solid | ||
Description
Border style of the grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-font-weight | var( --kendo-font-weight-bold, normal ) | ||
Description
Font weight of the grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-text-transform | uppercase | ||
Description
Text transform of the grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-bg | var( --kendo-component-bg, inherit ) | ||
Description
Background color of the grid column menu group. | |||
| $kendo-grid-column-menu-group-header-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the grid column menu group. | |||
| $kendo-grid-column-menu-group-header-border | var( --kendo-component-border, inherit) | ||
Description
Border color of the grid column menu group. | |||
| $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x | 0 | ||
Description
Horizontal padding of the tabstrip content in the grid tabbed column menu. | |||
| $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding of the tabstrip content in the grid tabbed column menu. | |||
| $kendo-grid-column-menu-tabbed-bg | var( --kendo-base-bg, inherit ) | ||
Description
Background color of the grid tabbed column menu. | |||
| $kendo-grid-drag-cell-width | calc( var( --kendo-icon-size, 1rem ) * 2.25 ) | ||
Description
Default width of the grid drag cell. | |||
| $kendo-grid-hierarchy-col-width | calc( var( --kendo-icon-size, 1rem ) * 2 ) | ||
Description
Default width of the grid hierarchy cell. | |||
| $kendo-grid-filterable-icon-spacing | calc( #{$kendo-button-calc-size} + #{$kendo-grid-header-menu-spacing} ) | ||
Description
Spacing of the grid filterable icon. | |||
| $kendo-grid-row-resizer-hover-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) | ||
Description
Background color of the grid row resize indicator | |||
| $kendo-grid-row-resizer-active-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Active background color of the grid row indicator | |||
| $kendo-grid-row-resizer-height | map.get( $kendo-spacing, 0.5 ) | ||
Description
Height of the grid row resize indicator | |||
