New to Kendo UI for Angular? Start a free 30-day trial

Customizing Grid

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-grid-padding-xNumber$kendo-table-md-cell-padding-x12px
Description
Horizontal padding of the grid.
$kendo-grid-padding-yNumber$kendo-table-md-cell-padding-y8px
Description
Vertical padding of the grid.
$kendo-grid-header-padding-xNumber$kendo-grid-padding-x12px
Description
Horizontal padding of the grid header.
$kendo-grid-header-padding-yNumber$kendo-grid-padding-y8px
Description
Vertical padding of the grid header.
$kendo-grid-grouping-header-padding-xNumber$kendo-grid-padding-y8px
Description
Horizontal padding of the grid grouping header.
$kendo-grid-grouping-header-padding-yNumber$kendo-grid-grouping-header-padding-x8px
Description
Vertical padding of the grid grouping header.
$kendo-grid-cell-padding-xNumber$kendo-grid-padding-x12px
Description
Horizontal padding of the grid cell.
$kendo-grid-cell-padding-yNumber$kendo-grid-padding-y8px
Description
Vertical padding of the grid cell.
$kendo-grid-filter-cell-padding-xNumber$kendo-grid-padding-y8px
Description
Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-yNumber$kendo-grid-filter-cell-padding-x8px
Description
Vertical padding of the grid filter cell.
$kendo-grid-edit-cell-padding-xNumber$kendo-grid-cell-padding-x12px
Description
Horizontal padding of the grid edit cell.
$kendo-grid-edit-cell-padding-yNumber3px3px
Description
Vertical padding of the grid filter cell.
$kendo-grid-bgColor$kendo-table-bg#ffffff
Description
Background color of the grid component
$kendo-grid-textColor$kendo-table-text#424242
Description
Text color of the grid component
$kendo-grid-borderColor$kendo-table-borderrgba(0, 0, 0, 0.08)
Description
Border color of the grid component
$kendo-grid-header-bgColor$kendo-table-header-bg#fafafa
Description
Background color of grid header
$kendo-grid-header-textColor$kendo-table-header-text#424242
Description
Text color of grid header
$kendo-grid-header-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.08)
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-grid-header-bg#fafafa
Description
Background color of grid footer
$kendo-grid-footer-textColor$kendo-grid-header-text#424242
Description
Text color of grid footer
$kendo-grid-footer-borderColor$kendo-grid-header-borderrgba(0, 0, 0, 0.08)
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-bg#ededed
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(255, 99, 88, 0.25)
Description
Background color of selected rows in grid
$kendo-grid-selected-textNull$kendo-table-selected-textnull
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#fafafa
Description
Background color of the selection aggregates container
$kendo-grid-selection-aggregates-textColor$kendo-grid-text#424242
Description
Text color of the selection aggregates container
$kendo-grid-selection-aggregates-borderColor$kendo-grid-borderrgba(0, 0, 0, 0.08)
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 )8px
Description
Spacing between the selection aggregates items
$kendo-grid-selection-aggregates-line-heightNumber$kendo-grid-line-height1.4285714286
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, rgba( k-color( on-base, true ), .2 ), 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#ff6358
Description
Active background color of the grid row resize indicator
$kendo-grid-row-resizer-heightNumberk-map-get( $kendo-spacing, .5 )2px
Description
Height of the grid row resize indicator

In this article

Not finding the help you need?