New to Kendo UI for Angular? 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-padding-x | Number | $kendo-table-md-cell-padding-x | 24px |
Description
Horizontal padding of the grid. | |||
| $kendo-grid-padding-y | Number | $kendo-table-md-cell-padding-y | 10px |
Description
Vertical padding of the grid. | |||
| $kendo-grid-header-padding-x | Number | $kendo-grid-padding-x | 24px |
Description
Horizontal padding of the grid header. | |||
| $kendo-grid-header-padding-y | Number | 16px | 16px |
Description
Vertical padding of the grid header. | |||
| $kendo-grid-grouping-header-padding-x | Number | 8px | 8px |
Description
Horizontal padding of the grid grouping header. | |||
| $kendo-grid-grouping-header-padding-y | Number | $kendo-grid-grouping-header-padding-x | 8px |
Description
Vertical padding of the grid grouping header. | |||
| $kendo-grid-cell-padding-x | Number | $kendo-grid-padding-x | 24px |
Description
Horizontal padding of the grid cell. | |||
| $kendo-grid-cell-padding-y | Number | $kendo-grid-padding-y | 10px |
Description
Vertical padding of the grid cell. | |||
| $kendo-grid-filter-cell-padding-x | Number | $kendo-grid-padding-x | 24px |
Description
Horizontal padding of the grid filter cell. | |||
| $kendo-grid-filter-cell-padding-y | Number | $kendo-grid-padding-y | 10px |
Description
Vertical padding of the grid filter cell. | |||
| $kendo-grid-edit-cell-padding-x | Number | $kendo-grid-cell-padding-x | 24px |
Description
Horizontal padding of the grid edit cell. | |||
| $kendo-grid-edit-cell-padding-y | Number | 6px | 6px |
Description
Vertical padding of the grid edit cell. | |||
| $kendo-grid-bg | Color | $kendo-table-bg | #ffffff |
Description
Background color of the grid component | |||
| $kendo-grid-text | Color | $kendo-table-text | rgba(0, 0, 0, 0.87) |
Description
Text color of the grid component | |||
| $kendo-grid-border | Color | $kendo-table-border | rgba(0, 0, 0, 0.12) |
Description
Border color of the grid component | |||
| $kendo-grid-header-bg | Color | $kendo-table-header-bg | #ffffff |
Description
Background color of grid header | |||
| $kendo-grid-header-text | Color | $kendo-table-header-text | rgba(0, 0, 0, 0.54) |
Description
Background color of grid header | |||
| $kendo-grid-header-border | Color | $kendo-table-header-border | rgba(0, 0, 0, 0.12) |
Description
Border color of grid header | |||
| $kendo-grid-header-gradient | Null | null | null |
Description
Background gradient of grid header | |||
| $kendo-grid-footer-bg | Color | $kendo-table-footer-bg | #ffffff |
Description
Background color of grid footer | |||
| $kendo-grid-footer-text | Color | $kendo-table-footer-text | rgba(0, 0, 0, 0.54) |
Description
Text color of grid footer | |||
| $kendo-grid-footer-border | Color | $kendo-table-footer-border | rgba(0, 0, 0, 0.12) |
Description
Border color of grid footer | |||
| $kendo-grid-alt-bg | Color | $kendo-table-alt-row-bg | transparent |
Description
Background color of alternating rows in grid | |||
| $kendo-grid-alt-text | Null | $kendo-table-alt-row-text | null |
Description
Text color of alternating rows in grid | |||
| $kendo-grid-alt-border | Null | $kendo-table-alt-row-border | null |
Description
Text color of alternating rows in grid | |||
| $kendo-grid-hover-bg | Color | $kendo-table-hover-bg | rgba(0, 0, 0, 0.07) |
Description
Background color of hovered rows in grid | |||
| $kendo-grid-hover-text | Null | $kendo-table-hover-text | null |
Description
Text color of hovered rows in grid | |||
| $kendo-grid-hover-border | Color | $kendo-table-hover-border | rgba(0, 0, 0, 0.12) |
Description
Border color of hovered rows in grid | |||
| $kendo-grid-selected-bg | Color | $kendo-table-selected-bg | rgba(0, 0, 0, 0.04) |
Description
Background color of selected rows in grid | |||
| $kendo-grid-selected-text | Null | $kendo-table-selected-text | null |
Description
Text color of selected rows in grid | |||
| $kendo-grid-selected-border | Null | $kendo-table-selected-border | null |
Description
Border color of selected rows in grid | |||
| $kendo-grid-selection-aggregates-bg | Color | $kendo-grid-header-bg | #ffffff |
Description
Background color of the selection aggregates container | |||
| $kendo-grid-selection-aggregates-text | Color | $kendo-grid-text | rgba(0, 0, 0, 0.87) |
Description
Text color of the selection aggregates container | |||
| $kendo-grid-selection-aggregates-border | Color | $kendo-grid-border | rgba(0, 0, 0, 0.12) |
Description
Border color of the selection aggregates container | |||
| $kendo-grid-selection-aggregates-border-width | Number | $kendo-grid-border-width | 1px |
Description
Border width of the selection aggregates container | |||
| $kendo-grid-selection-aggregates-spacing | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
Spacing between the selection aggregates items | |||
| $kendo-grid-selection-aggregates-line-height | Number | 20px | 20px |
Description
Line height of the selection aggregates container | |||
| $kendo-grid-selection-aggregates-font-weight | Number | $kendo-font-weight-bold | 700 |
Description
Font weight of the selection aggregates container | |||
| $kendo-grid-row-resizer-hover-bg | Color | rgba( k-contrast-color( $kendo-grid-bg ), .24 ) | rgba(0, 0, 0, 0.24) |
Description
Background color of the grid row resize indicator | |||
| $kendo-grid-row-resizer-active-bg | Color | $kendo-color-primary | #3f51b5 |
Description
Active background color of the grid row resize indicator | |||
| $kendo-grid-row-resizer-height | Number | k-map-get( $kendo-spacing, .5 ) | 2px |
Description
Height of the grid row resize indicator | |||
