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-6, 1.5rem)
Description The horizontal padding of the PivotGrid cell.
$kendo-pivotgrid-cell-padding-y	String	$kendo-table-md-cell-padding-y	var(--kendo-spacing-2\.5, 0.625rem)
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, #212121)
Description The text color of the PivotGrid.
$kendo-pivotgrid-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.12))
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.15))
Description The alt border color of the PivotGrid.
$kendo-pivotgrid-headers-bg	String	if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 2%, transparent), rgba( $kendo-component-header-bg, .02 ))	color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 2%, transparent)
Description The background color of the PivotGrid header.
$kendo-pivotgrid-headers-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #212121)
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.12))
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, #212121)
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.12))
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( base-active ) 25%, transparent), rgba( k-contrast-color( $kendo-pivotgrid-bg ), .04 ))	color-mix(in srgb, var(--kendo-color-base-active, #d6d6d6) 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	Null	$kendo-list-item-focus-shadow	null
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)	var(--kendo-spacing-0, 0px)
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, #212121)
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.12))
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, #212121)
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-end-shadow	String	$box-shadow-depth-3	var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description The shadow of the PivotGrid configurator.
$kendo-pivotgrid-configurator-start-shadow	String	$box-shadow-depth-3	var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description The end shadow of the PivotGrid configurator.
$kendo-pivotgrid-configurator-top-shadow	String	$box-shadow-depth-3	var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description The start shadow of the PivotGrid configurator.
$kendo-pivotgrid-configurator-bottom-shadow	String	$box-shadow-depth-3	var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description The top 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, #212121)
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.12))
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, #212121)
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	String	$kendo-pivotgrid-spacer	var(--kendo-spacing-4, 1rem)
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