Customizing Pivotgrid

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-pivotgrid-spacer	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The spacer of the PivotGrid.
$kendo-pivotgrid-padding-x	Null	null	null
Description The horizontal padding of the PivotGrid.
$kendo-pivotgrid-padding-y	Null	null	null
Description The vertical of the PivotGrid.
$kendo-pivotgrid-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the PivotGrid.
$kendo-pivotgrid-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the PivotGrid.
$kendo-pivotgrid-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the PivotGrid.
$kendo-pivotgrid-border-width	Number	1px	1px
Description The border width of the PivotGrid.
$kendo-pivotgrid-icon-spacing	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The icon spacing of the PivotGrid.
$kendo-pivotgrid-row-header-width	Number	300px	300px
Description The default width of the PivotGrid row header.
$kendo-pivotgrid-column-header-height	Number	75px	75px
Description The default height of the PivotGrid column header.
$kendo-pivotgrid-cell-padding-x	String	$kendo-table-md-cell-padding-x	var(--kendo-spacing-3, 0.75rem)
Description The horizontal padding of the PivotGrid cell.
$kendo-pivotgrid-cell-padding-y	String	$kendo-table-md-cell-padding-y	var(--kendo-spacing-2, 0.5rem)
Description The vertical padding of the PivotGrid cell.
$kendo-pivotgrid-cell-border-width	Number	1px	1px
Description The border width of the PivotGrid cell.
$kendo-pivotgrid-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the PivotGrid.
$kendo-pivotgrid-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid.
$kendo-pivotgrid-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the PivotGrid.
$kendo-pivotgrid-alt-border	String	if($kendo-enable-color-system, k-color( border-alt ), k-try-shade($kendo-pivotgrid-border, 2))	var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))
Description The alt border color of the PivotGrid.
$kendo-pivotgrid-headers-bg	String	$kendo-component-header-bg	var(--kendo-color-surface, #fafafa)
Description The background color of the PivotGrid header.
$kendo-pivotgrid-headers-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid header.
$kendo-pivotgrid-headers-border	String	$kendo-component-header-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the PivotGrid header.
$kendo-pivotgrid-total-bg	String	if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 ))	var(--kendo-color-base-subtle, #ebebeb)
Description The background color of the PivotGrid total cells.
$kendo-pivotgrid-total-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid total cells.
$kendo-pivotgrid-total-border	String	$kendo-component-header-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the PivotGrid total cells.
$kendo-pivotgrid-hover-bg	String	if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-pivotgrid-bg, 7%))	var(--kendo-color-base-hover, #ebebeb)
Description The hover background color of the PivotGrid.
$kendo-pivotgrid-hover-text	Null	null	null
Description The hover text color of the PivotGrid.
$kendo-pivotgrid-hover-border	Null	null	null
Description The hover border color of the PivotGrid.
$kendo-pivotgrid-selected-bg	String	if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))	color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)
Description The selected background color of the PivotGrid.
$kendo-pivotgrid-selected-text	Null	null	null
Description The selected text color of the PivotGrid.
$kendo-pivotgrid-selected-border	Null	null	null
Description The selected border color of the PivotGrid.
$kendo-pivotgrid-focus-shadow	List	$kendo-list-item-focus-shadow	inset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description The focus shadow of the PivotGrid.
$kendo-pivotgrid-configurator-padding-x	Null	null	null
Description The horizontal padding of the PivotGrid configurator.
$kendo-pivotgrid-configurator-padding-y	Null	null	null
Description The vertical padding of the PivotGrid configurator.
$kendo-pivotgrid-configurator-border-width	Number	1px	1px
Description The border width of the PivotGrid configurator.
$kendo-pivotgrid-configurator-header-padding-x	String	$kendo-pivotgrid-spacer	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-padding-y	Calculation	calc( #{$kendo-pivotgrid-spacer} * .75 )	calc(var(--kendo-spacing-4, 1rem) * 0.75)
Description The vertical padding of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-font-size	Number	18px	18px
Description The font size of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-font-weight	Number	500	500
Description The font weight of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-content-padding-x	String	$kendo-pivotgrid-spacer	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the PivotGrid configurator content.
$kendo-pivotgrid-configurator-content-padding-y	String	k-spacing(0.5)	var(--kendo-spacing-0\.5, 0.125rem)
Description The vertical padding of the PivotGrid configurator content.
$kendo-pivotgrid-configurator-fields-margin-x	String	k-spacing(0)	var(--kendo-spacing-0, 0px)
Description The horizontal margin of the PivotGrid configurator fields.
$kendo-pivotgrid-configurator-fields-margin-y	Calculation	calc( #{$kendo-pivotgrid-spacer} / 2 )	calc(var(--kendo-spacing-4, 1rem) / 2)
Description The vertical margin of the PivotGrid configurator fields.
$kendo-pivotgrid-configurator-vertical-width	Number	320px	320px
Description The default width of the PivotGrid vertical configurator.
$kendo-pivotgrid-configurator-horizontal-height	Number	420px	420px
Description The default height of the PivotGrid horizontal configurator.
$kendo-pivotgrid-configurator-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the PivotGrid configurator.
$kendo-pivotgrid-configurator-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid configurator.
$kendo-pivotgrid-configurator-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the PivotGrid configurator.
$kendo-pivotgrid-configurator-header-bg	Null	null	null
Description The background color of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-border	Null	null	null
Description The border color of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-shadow	String	k-elevation(3)	var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description The shadow of the PivotGrid configurator.
$kendo-pivotgrid-configurator-end-shadow	String	$kendo-pivotgrid-configurator-shadow	var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description The end shadow of the PivotGrid configurator.
$kendo-pivotgrid-configurator-start-shadow	String	$kendo-pivotgrid-configurator-shadow	var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description The start shadow of the PivotGrid configurator.
$kendo-pivotgrid-configurator-top-shadow	String	$kendo-pivotgrid-configurator-shadow	var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description The top shadow of the PivotGrid configurator.
$kendo-pivotgrid-configurator-bottom-shadow	String	$kendo-pivotgrid-configurator-shadow	var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description The bottom shadow of the PivotGrid configurator.
$kendo-pivotgrid-configurator-button-padding-x	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The horizontal padding of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-padding-y	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The vertical padding of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-border-width	Number	1px	1px
Description The border width of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-size	Calculation	calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) )	calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)
Description The size of the PivotGrid configurator button.
$kendo-pivotgrid-calculated-field-padding-x	String	$kendo-pivotgrid-spacer	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-padding-y	String	$kendo-pivotgrid-spacer	var(--kendo-spacing-4, 1rem)
Description The vertical padding of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-border-width	Number	1px	1px
Description The border width of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-border-radius	String	k-border-radius(md)	var(--kendo-border-radius-md, 0.25rem)
Description The border radius of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-gap	String	$kendo-pivotgrid-spacer	var(--kendo-spacing-4, 1rem)
Description The spacing of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-header-bg	Null	null	null
Description The background color of the PivotGrid calculated field header.
$kendo-pivotgrid-calculated-field-header-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid calculated field header.
$kendo-pivotgrid-calculated-field-header-border	Null	null	null
Description The border color of the PivotGrid calculated field header.
$kendo-pivotgrid-treeview-padding-x	Calculation	calc( #{$kendo-pivotgrid-spacer} / 2 )	calc(var(--kendo-spacing-4, 1rem) / 2)
Description The horizontal padding of the PivotGrid treeview.
$kendo-pivotgrid-treeview-padding-y	String	k-spacing(0)	var(--kendo-spacing-0, 0px)
Description The vertical padding of the PivotGrid treeview.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components