Customizing Grid

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-grid-padding-xNumber$kendo-table-md-cell-padding-x0.5rem
Description
Horizontal padding of the grid.
$kendo-grid-padding-yNumber$kendo-table-md-cell-padding-y0.5rem
Description
Vertical padding of the grid.
$kendo-grid-header-padding-xNumber$kendo-grid-padding-x0.5rem
Description
Horizontal padding of the grid header.
$kendo-grid-header-padding-yNumber$kendo-grid-padding-y0.5rem
Description
Vertical padding of the grid header.
$kendo-grid-grouping-header-padding-xNumber$kendo-grid-padding-y0.5rem
Description
Horizontal padding of the grid grouping header.
$kendo-grid-grouping-header-padding-yNumber$kendo-grid-grouping-header-padding-x0.5rem
Description
Vertical padding of the grid grouping header.
$kendo-grid-cell-padding-xNumber$kendo-grid-padding-x0.5rem
Description
Horizontal padding of the grid cell.
$kendo-grid-cell-padding-yNumber$kendo-grid-padding-y0.5rem
Description
Vertical padding of the grid cell.
$kendo-grid-filter-cell-padding-xNumber$kendo-grid-padding-y0.5rem
Description
Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-yNumber$kendo-grid-filter-cell-padding-x0.5rem
Description
Vertical padding of the grid filter cell.
$kendo-grid-edit-cell-padding-xNumber$kendo-grid-cell-padding-x0.5rem
Description
Horizontal padding of the grid edit cell.
$kendo-grid-edit-cell-padding-yNumber5px5px
Description
Vertical padding of the grid edit cell.
$kendo-grid-bgColor$kendo-table-bg#ffffff
Description
Background color of the grid component
$kendo-grid-textColor$kendo-table-text#212529
Description
Text color of the grid component
$kendo-grid-borderColor$kendo-table-border#dee2e6
Description
Border color of the grid component
$kendo-grid-header-bgColor$kendo-table-header-bg#f8f9fa
Description
Background color of grid header
$kendo-grid-header-textColor$kendo-table-header-text#212529
Description
Text color of grid header
$kendo-grid-header-borderColor$kendo-table-header-border#dee2e6
Description
Border color of grid header
$kendo-grid-header-gradientNull$kendo-table-header-gradientnull
Description
Background gradient of grid header
$kendo-grid-footer-bgColor$kendo-table-footer-bg#f8f9fa
Description
Background color of grid footer
$kendo-grid-footer-textColor$kendo-table-footer-text#212529
Description
Text color of grid footer
$kendo-grid-footer-borderColor$kendo-table-footer-border#dee2e6
Description
Border color of grid footer
$kendo-grid-alt-bgColor$kendo-table-alt-row-bgrgba(0, 0, 0, 0.04)
Description
Background color of alternating rows in grid
$kendo-grid-alt-textNull$kendo-table-alt-row-textnull
Description
Text color of alternating rows in grid
$kendo-grid-alt-borderNull$kendo-table-alt-row-bordernull
Description
Border color of alternating rows in grid
$kendo-grid-hover-bgColor$kendo-table-hover-bgrgba(0, 0, 0, 0.08)
Description
Background color of hovered rows in grid
$kendo-grid-hover-textNull$kendo-table-hover-textnull
Description
Text color of hovered rows in grid
$kendo-grid-hover-borderNull$kendo-table-hover-bordernull
Description
Border color of hovered rows in grid
$kendo-grid-selected-bgColor$kendo-table-selected-bgrgba(13, 110, 253, 0.25)
Description
Background color of selected rows in grid
$kendo-grid-selected-textColor$kendo-table-selected-text#212529
Description
Text color of selected rows in grid
$kendo-grid-selected-borderNull$kendo-table-selected-bordernull
Description
Border color of selected rows in grid
$kendo-grid-selection-aggregates-bgColor$kendo-grid-header-bg#f8f9fa
Description
Background color of the selection aggregates container
$kendo-grid-selection-aggregates-textColor$kendo-grid-text#212529
Description
Text color of the selection aggregates container
$kendo-grid-selection-aggregates-borderColor$kendo-grid-border#dee2e6
Description
Border color of the selection aggregates container
$kendo-grid-selection-aggregates-border-widthNumber$kendo-grid-border-width1px
Description
Border width of the selection aggregates container
$kendo-grid-selection-aggregates-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
Spacing between the selection aggregates items
$kendo-grid-selection-aggregates-line-heightNumber$kendo-grid-line-height1.5
Description
Line height of the selection aggregates container
$kendo-grid-selection-aggregates-font-weightNumber$kendo-font-weight-bold700
Description
Font weight of the selection aggregates container
$kendo-grid-row-resizer-hover-bgColorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))rgba(0, 0, 0, 0.12)
Description
Background color of the grid row resize indicator
$kendo-grid-row-resizer-active-bgColor$kendo-color-primary#0d6efd
Description
Active background color of the grid row resize indicator
$kendo-grid-row-resizer-heightNumberk-map-get( $kendo-spacing, .5 )0.125rem
Description
Height of the grid row resize indicator

In this article

Not finding the help you need?