Grid Custom CSS

From 4.4 version of Vitara Charts, users can customize grid chart by formatting the styles of rows and columns. Lets see those formattings below one by one.

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

Custom themes

From 4.5 version of Vitara Charts, users can create their own themes and use those themes in Grid chart
Creating custom themes will use two files in {VitaraCharts/custom/} folder. They are customStyles.css and global.txt.

In customStyles.ccs file, the CSS class names and properties will be added. To know about CSS classes and properties, refer the above sections 1 to 6.
In the global.txt file, themes will be listed so as to get the themes visible in the property editor.

Let us look into creating themes using the below steps.

Step 1:

For example, if we have to create a theme named ‘theme1’ which styles even and odd rows of the grid chart. Then in customStyles.css file, the format of CSS code should be as

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

In the above block of code, Theme1 is the name of the theme.
And if you have observed, the theme name ‘Theme1’ is repeated i.e, the name is mentioned in both the first and second blocks of code.
So according to the feature, the theme name should be repeated for as many as blocks of code for those styles to get applied only to a specific theme.

Now, let’s create another theme which styles all the rows and the header cells. And the format should be as below

.Theme2 .vitara-row{
    color:blue; 
    background-color:lightblue !important;
    font-family:calibri;
    font-size:14px; 
}
.Theme2 .vitara-header.vitara-grid-header-cell {
	color:brown;
	font-size:15px;
	font-family:calibri;
	font-weight: bold;
	background-color:pink;
}

And in the above blocks of CSS code also, the theme name Theme2 is repeated.

Step 2:

Now, add those theme names in global.txt file in the below format. Note that theme names are case sensitive. So the names should be as if they are mentioned in customStyles.css.

gridThemes.themes=Theme1,Theme2

Then the themes will get listed in the grid chart. This can be checked in two ways, one way is through the property editor and the other way is through the context menu [2020]. See the screenshots below

  1. Property Editor
    CustomThemes

  2. Context menu
    CustomThemes

Step 3:

Now, apply Theme1 from either the property editor or context menu. Then the charts like below screenshot.
CustomThemes

And apply Theme2. Then the chart looks like the screenshot below.
CustomThemes

Base Themes

Base theme is the theme upon which the custom theme styles are applied. And a custom theme always gets applied on a base theme.
For example, we have a grid chart and the theme applied is ‘Blue’. And now if we apply any custom theme, the styles do not get applied on a blue based theme, but on a white based theme instead. This is because all custom themes are by default based to white theme.

Below is the screenshot of the grid chart saved with ‘Blue’ theme
CustomThemes

After applying the custom theme ‘theme1’, the base theme gets changed to white. See the colors of headers and group dropzones in the below screenshot.
CustomThemes

Changing the base theme:

We can also change the base theme for the custom themes. The base can be either an In-built theme or any custom theme. For example, if we want the base theme to be ‘Dark’, then add the below line in global.txt file.

gridThemes.baseThemes=Dark

Now apply the custom theme ‘Theme1’, then the styles get applied upon the ‘Dark’ base theme. See the screenshot below and compare it with the previous screenshot.
CustomThemes

Setting default theme

From the 4.5 version of Vitara Charts, we can set the default theme in the Grid chart. The default theme can be either an In-built theme or any custom theme For example, we want to set default theme to ‘Theme2’ which is a custom theme, then add the below in global.txt file

gridThemes.defaultTheme=Theme2