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

Customizing Grid

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$grid-bgColor

$component-bg

#ffffff

Description
Background color of the grid component
$grid-textColor

$component-text

#424242

Description
Text color of the grid component
$grid-borderColor

$component-border

rgba(0, 0, 0, 0.08)

Description
Border color of the grid component
$grid-header-bgColor

$header-bg

#fafafa

Description
Background color of grid header
$grid-header-textColor

$header-text

#424242

Description
Text color of grid header
$grid-header-borderColor

$grid-border

rgba(0, 0, 0, 0.08)

Description
Border color of grid header
$grid-header-gradientNull

$header-gradient

null

Description
Background gradient of grid header
$grid-footer-bgColor

$grid-header-bg

#fafafa

Description
Background color of grid footer
$grid-footer-textColor

$grid-header-text

#424242

Description
Text color of grid footer
$grid-footer-borderColor

$grid-header-border

rgba(0, 0, 0, 0.08)

Description
Border color of grid footer
$grid-alt-bgColor

rgba( contrast-wcag( $grid-bg ), .04 )

rgba(0, 0, 0, 0.04)

Description
Background color of alternating rows in grid
$grid-alt-textNull

null

null

Description
Text color of alternating rows in grid
$grid-alt-borderNull

null

null

Description
Border color of alternating rows in grid
$grid-hovered-bgColor

darken($grid-bg, 7%)

#ededed

Description
Background color of hovered rows in grid
$grid-hovered-textNull

null

null

Description
Text color of hovered rows in grid
$grid-hovered-borderNull

null

null

Description
Border color of hovered rows in grid
$grid-selected-bgColor

rgba($selected-bg, .25)

rgba(255, 99, 88, 0.25)

Description
Background color of selected rows in grid
$grid-selected-textNull

null

null

Description
Text color of selected rows in grid
$grid-selected-borderNull

null

null

Description
Border color of selected rows in grid

In this article

Not finding the help you need?