These features are supported in the release 4.2 (or newer)

Grid Custom CSS

1. Row Styles:

1.1 Styling all the rows

Each row in the grid can be commonly styled using the below class.

.vitara-row{
    color:blue; 
    background-color:lightblue !important;
    font-family:calibri;
    font-size:14px; 
}

Below is the screenshot with the above custom styles applied.
Grid_row

1.2 Styling Even/Odd rows

All the even rows in the grid can be styled using the below class

.vitara-row.vitara-grid-row-even{
    color:white;
    background-color: lightseagreen;
    font-size:12px;
    font-family:verdana;
}

All the odd rows in the grid can be styled using the below class

.vitara-row.vitara-grid-row-odd{
    color:wheat;
    background-color:teal;
    font-family:helvetica;
    font-size:12px;
}

Below is the screenshot which shows the applied styles for even and odd rows.
Grid_row_odd_even

2. Grouped Row Styles

2.1 Styling all the grouped rows

To style all the grouped rows in the chart, use the below class.

.vitara-row.vitara-grid-row-group{
	color:indigo !important;
}

Below screenshot shows the above styles applied for the grouped rows.
Grid_row_group

2.2 Styling Even/Odd grouped rows

All the even grouped rows in the grid can be styled using the below class

.vitara-row.vitara-grid-row-even.vitara-grid-row-group{
    color:orange;
    background-color:purple;
    font-family:lucida console;
    font-size:12px;
    font-weight:bold;
}

All the odd grouped rows in the grid can be styled using the below class

.vitara-row.vitara-grid-row-odd.vitara-grid-row-group{
    color:purple;
    background-color:orange;
    font-family:lucida console;
    font-size:12px; 
}

Below is the screenshot that shows the styles applied on odd and even grouped rows.
Grid_row_group_odd_even

3.Styling the Headers

3.1 Styling the normal header

The headers in the grid can be styled using the below class.

.vitara-header.vitara-grid-header-cell {
	color:brown;
	font-size:15px;
	font-family:calibri;
	font-weight: bold;
	background-color:pink;
}

Below screenshot shows the above styles applied on the header cell in the normal grid.
grid_header_styles

3.2 Styling the grouped header

Grouped header cells are formed by either pivoting or column grouping. These headers can be styled by using the below class. These styles will not be applied to the header cell in a normal(neither pivoted nor column grouped) grid.

.vitara-header.vitara-grid-grouped-header-cell{
	color:blue;
	background-color:silver;
}

Below screenshot shows the above styles applied on the grouped header cell.
grouped_header_style

4. Styling the Subtotals

4.1 Styling the Subtotal headers

Subtotal headers can be styled using the below class.

.vitara-grid-subtotals-header.vitara-grid-subtotals-cell{
    color:yellow;
    background-color:orange;
}

Below screenshot shows the above styles applied for the subtotal header.
grid_subtotal_header

4.2 Styling the Subtotal values

Subtotal values can be styled using the below class.

.vitara-grid-subtotals-value.vitara-grid-subtotals-cell{
    color:yellow;
    background-color:orange;
}

Below screenshot shows the above styles applied for the subtotal values.
grid_subtotal_value

5. Column Styles

Every even column can be styled using the below class.

.vitara-grid-column:nth-child(2n){
	color:#ff890f;
	background-color:#0ff888;
 	font-weight:bold;
	font-family:verdana;
	font-size:11px;
}

Every odd column can be styled using the below class.

.vitara-grid-column:nth-child(2n+1){
	color:#fff;
	background-color:#ff8800;
	font-size:11px;
	font-family:verdana;
}

Below is the screenshot that shows the applied styles for odd and even columns.
grid_column_styles

The styles applied for columns will also be reflected for Grand totals, to overcome those we will style grand totals using the below classes

.vitara-grand-totals-header.vitara-grand-totals-cell{
	color:red;
	background-color:black;
}
.vitara-grand-totals-value.vitara-grand-totals-cell{
	color:red;
	background-color:black;
	font-weight:unset;
}

See the screenshot below which shows the grand total styles that overcomes the column styles applied on it
grid_col_grand_totals

6. Grand Totals

6.1 Grand totals row

The entire grand totals row can be styled using the below class

.vitara-grand-totals.vitara-grand-totals{
    color:white;
    background-color:brown !important;
    font-family:lucida console;
    font-weight:bold;	
}

See the below screenshot with the above properties applied.
grid_grand_totals

6.2 Grand totals title

To style only the grand totals title, use the below class

.vitara-grand-totals-header.vitara-grand-totals-cell{
    color:yellow;
    background-color:seagreen;
    font-family:helvetica;
    font-weight:bold;
    font-style:italic;
}

See the screenshot with the above properties applied only to the grand totals title.
grid_grand_totals_title

6.3 Grand totals values

To style only the grand totals’ values, use the below class.

.vitara-grand-totals-value.vitara-grand-totals-cell{
    color:lightgreen;
    background-color:teal;
    font-family:verdana;
    font-style:italic;
}

See the below screenshot with the above properties applied only to the grand totals values
grid_grand_totals_values