Grid

Grids allow users to view and efficiently manipulate large amounts of data in a tabular format.

Sass Variables

The Telerik and Kendo UI Grid is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Toolbar Sass variables, as well as the Sass variables provided by the Button, Pager, and Textbox components.

VariableDefault ValueComputed ValueValue
kendo-grid-padding-x$kendo-table-md-cell-padding-xvar(--kendo-spacing-3, 0.75rem)Default: $kendo-table-md-cell-padding-xComputed: var(--kendo-spacing-3, 0.75rem)
Description: The horizontal padding of the Grid.
kendo-grid-padding-y$kendo-table-md-cell-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-table-md-cell-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid.
kendo-grid-header-padding-x$kendo-grid-padding-xvar(--kendo-spacing-3, 0.75rem)Default: $kendo-grid-padding-xComputed: var(--kendo-spacing-3, 0.75rem)
Description: The horizontal padding of the Grid header.
kendo-grid-header-padding-y$kendo-grid-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid header.
kendo-grid-grouping-header-padding-x$kendo-grid-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid grouping header.
kendo-grid-grouping-header-padding-y$kendo-grid-grouping-header-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-grouping-header-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid grouping header.
kendo-grid-cell-padding-x$kendo-grid-padding-xvar(--kendo-spacing-3, 0.75rem)Default: $kendo-grid-padding-xComputed: var(--kendo-spacing-3, 0.75rem)
Description: The horizontal padding of the Grid cell.
kendo-grid-cell-padding-y$kendo-grid-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid cell.
kendo-grid-filter-cell-padding-x$kendo-grid-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Grid filter cell.
kendo-grid-filter-cell-padding-y$kendo-grid-filter-cell-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-grid-filter-cell-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Grid filter cell.
kendo-grid-edit-cell-padding-x$kendo-grid-cell-padding-xvar(--kendo-spacing-3, 0.75rem)Default: $kendo-grid-cell-padding-xComputed: var(--kendo-spacing-3, 0.75rem)
Description: The horizontal padding of the Grid edit cell.
kendo-grid-edit-cell-padding-ycalc( #{k-spacing(1.5)} / 2 )calc(var(--kendo-spacing-1\.5, 0.375rem) / 2)Default: calc( #{k-spacing(1.5)} / 2 )Computed: calc(var(--kendo-spacing-1\.5, 0.375rem) / 2)
Description: The vertical padding of the Grid filter cell.
kendo-grid-bg$kendo-table-bgvar(--kendo-color-surface-alt, #ffffff)Default: $kendo-table-bgComputed: var(--kendo-color-surface-alt, #ffffff)
Description: The background color of the Grid.
kendo-grid-text$kendo-table-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-table-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the Grid.
kendo-grid-border$kendo-table-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-table-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the Grid.
kendo-grid-header-bg$kendo-table-header-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-table-header-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of Grid header.
kendo-grid-header-text$kendo-table-header-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-table-header-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of Grid header.
kendo-grid-header-border$kendo-table-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-table-header-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of Grid header.
kendo-grid-header-gradient$kendo-table-header-gradientnullDefault: $kendo-table-header-gradientComputed: null
Description: The background gradient of Grid header.
kendo-grid-footer-bg$kendo-grid-header-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-grid-header-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of Grid footer.
kendo-grid-footer-text$kendo-grid-header-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-grid-header-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of Grid footer.
kendo-grid-footer-border$kendo-grid-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-grid-header-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of Grid footer.
kendo-grid-alt-bg$kendo-table-alt-row-bgcolor-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent)Default: $kendo-table-alt-row-bgComputed: color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent)
Description: The background color of the Grid alternating rows.
kendo-grid-alt-text$kendo-table-alt-row-textnullDefault: $kendo-table-alt-row-textComputed: null
Description: The text color of the Grid alternating rows.
kendo-grid-alt-border$kendo-table-alt-row-bordernullDefault: $kendo-table-alt-row-borderComputed: null
Description: The border color of the Grid alternating rows.
kendo-grid-hover-bg$kendo-table-hover-bgcolor-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent)Default: $kendo-table-hover-bgComputed: color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent)
Description: The background color of hovered Grid rows.
kendo-grid-hover-text$kendo-table-hover-textnullDefault: $kendo-table-hover-textComputed: null
Description: The text color of hovered Grid rows.
kendo-grid-hover-border$kendo-table-hover-bordernullDefault: $kendo-table-hover-borderComputed: null
Description: The border color of hovered Grid rows.
kendo-grid-selected-bg$kendo-table-selected-bgcolor-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)Default: $kendo-table-selected-bgComputed: color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)
Description: The background color of selected Grid rows.
kendo-grid-selected-text$kendo-table-selected-textnullDefault: $kendo-table-selected-textComputed: null
Description: The text color of selected Grid rows.
kendo-grid-selected-border$kendo-table-selected-bordernullDefault: $kendo-table-selected-borderComputed: null
Description: The border color of selected Grid rows.
kendo-grid-selection-aggregates-bg$kendo-grid-header-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-grid-header-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of the Grid selection aggregates container.
kendo-grid-selection-aggregates-text$kendo-grid-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-grid-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the Grid selection aggregates container.
kendo-grid-selection-aggregates-border$kendo-grid-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-grid-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the Grid selection aggregates container.
kendo-grid-selection-aggregates-border-width$kendo-grid-border-width1pxDefault: $kendo-grid-border-widthComputed: 1px
Description: The border width of the Grid selection aggregates container.
kendo-grid-selection-aggregates-spacingk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The spacing between the selection aggregates items.
kendo-grid-selection-aggregates-line-height$kendo-grid-line-heightvar(--kendo-line-height, normal)Default: $kendo-grid-line-heightComputed: var(--kendo-line-height, normal)
Description: The line height of the Grid selection aggregates container.
kendo-grid-selection-aggregates-font-weightvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)Default: var( --kendo-font-weight-bold, normal )Computed: var(--kendo-font-weight-bold, normal)
Description: The font weight of the Grid selection aggregates container.
kendo-grid-row-resizer-hover-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 20%, transparent)Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 20%, transparent)
Description: The background color of the Grid row resize indicator.
kendo-grid-row-resizer-active-bg$kendo-color-primaryvar(--kendo-color-primary, #ff6358)Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358)
Description: The background color of the active Grid row resize indicator.
kendo-grid-row-resizer-heightk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5, 0.125rem)
Description: The height of the Grid row resize indicator.
Feedback