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 | 12px |
Description
Horizontal padding of the grid. | |||
| $kendo-grid-padding-y | Number | $kendo-table-md-cell-padding-y | 8px |
Description
Vertical padding of the grid. | |||
| $kendo-grid-header-padding-x | Number | $kendo-grid-padding-x | 12px |
Description
Horizontal padding of the grid header. | |||
| $kendo-grid-header-padding-y | Number | $kendo-grid-padding-y | 8px |
Description
Vertical padding of the grid header. | |||
| $kendo-grid-grouping-header-padding-x | Number | $kendo-grid-padding-y | 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 | 12px |
Description
Horizontal padding of the grid cell. | |||
| $kendo-grid-cell-padding-y | Number | $kendo-grid-padding-y | 8px |
Description
Vertical padding of the grid cell. | |||
| $kendo-grid-filter-cell-padding-x | Number | $kendo-grid-padding-y | 8px |
Description
Horizontal padding of the grid filter cell. | |||
| $kendo-grid-filter-cell-padding-y | Number | $kendo-grid-filter-cell-padding-x | 8px |
Description
Vertical padding of the grid filter cell. | |||
| $kendo-grid-edit-cell-padding-x | Number | $kendo-grid-cell-padding-x | 12px |
Description
Horizontal padding of the grid edit cell. | |||
| $kendo-grid-edit-cell-padding-y | Number | 3px | 3px |
Description
Vertical padding of the grid filter cell. | |||
| $kendo-grid-bg | Color | $kendo-table-bg | #ffffff |
Description
Background color of the grid component | |||
| $kendo-grid-text | Color | $kendo-table-text | #424242 |
Description
Text color of the grid component | |||
| $kendo-grid-border | Color | $kendo-table-border | rgba(0, 0, 0, 0.08) |
Description
Border color of the grid component | |||
| $kendo-grid-header-bg | Color | $kendo-table-header-bg | #fafafa |
Description
Background color of grid header | |||
| $kendo-grid-header-text | Color | $kendo-table-header-text | #424242 |
Description
Text color of grid header | |||
| $kendo-grid-header-border | Color | $kendo-table-header-border | rgba(0, 0, 0, 0.08) |
Description
Border color of grid header | |||
| $kendo-grid-header-gradient | Null | $kendo-table-header-gradient | null |
Description
Background gradient of grid header | |||
| $kendo-grid-footer-bg | Color | $kendo-grid-header-bg | #fafafa |
Description
Background color of grid footer | |||
| $kendo-grid-footer-text | Color | $kendo-grid-header-text | #424242 |
Description
Text color of grid footer | |||
| $kendo-grid-footer-border | Color | $kendo-grid-header-border | rgba(0, 0, 0, 0.08) |
Description
Border color of grid footer | |||
| $kendo-grid-alt-bg | Color | $kendo-table-alt-row-bg | rgba(0, 0, 0, 0.04) |
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
Border color of alternating rows in grid | |||
| $kendo-grid-hover-bg | Color | $kendo-table-hover-bg | #ededed |
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 | Null | $kendo-table-hover-border | null |
Description
Border color of hovered rows in grid | |||
| $kendo-grid-selected-bg | Color | $kendo-table-selected-bg | rgba(255, 99, 88, 0.25) |
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 | #fafafa |
Description
Background color of the selection aggregates container | |||
| $kendo-grid-selection-aggregates-text | Color | $kendo-grid-text | #424242 |
Description
Text color of the selection aggregates container | |||
| $kendo-grid-selection-aggregates-border | Color | $kendo-grid-border | rgba(0, 0, 0, 0.08) |
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 | $kendo-grid-line-height | 1.4285714286 |
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 ), .12 ) | rgba(0, 0, 0, 0.12) |
Description
Background color of the grid row resize indicator | |||
| $kendo-grid-row-resizer-active-bg | Color | $kendo-color-primary | #ff6358 |
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 | |||
