In one of our previous blog post, we discussed how to change the header style of a Google Visualization Datatable. We saw how to use images / Change font for the header row in the table. In this post, we will see how to change the style for non-header rows. We will use a simple datatable as shown below for example purposes
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Place');
data.addRows(2);
data.setCell(0, 0, 'John');
data.setCell(1, 0, 'Sam');
data.setCell(0, 1, 'Stockholm');
data.setCell(1, 1, 'Dubai');
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="table"></div>
</body>
</html>
To do this, we will begin by defining the style we would like to use for the table row. The definition for the style is provided below <style type="text/css">
.StyleRows {
background-color: #FFFFFF;
color: #3366CC;
font: 13px Verdana;
font-weight: bold;
text-align: center; }
</style> We define a new Style “StyleRows” which we will be using in our code to color our rows. Copy this style definition inside the HEAD tags. Now, when we invoke visualization.draw method, we will use a configuration option cssClassNames to define the style of the row. To specify a style for HTML rows we will use ‘tableRow’ property and attach this with “StyleRows” definitions we created. The code looks much simple than the description in this case; The code snippet to do this given below..
//Style Rows
var StyleRows = {tableRow: 'StyleRows'} ;
visualization.draw(data,{allowHtml: true,height : 500,width: 728,cssClassNames: StyleRows});
Note that for row level style change to work, we have to set “allowHtml” property to True. The javascript object “StyleRows” maps the “tableRow” to the style definition we created. That is it. When you run this code, the table gets modified as per the screen diagram below
 |
| Datatable - Styling Rows |
Now, the catch!..Only the first row got the style applied and not the alternating even row..(second row). This is because the property “alternatingRowStyle” is set to True by default and the datatable applies the default style to this row. If you want the same style to be applied for second row, you have to set alternatingRowStyle configuration option to false. This is shown below;
visualization.draw(data,{allowHtml: true,alternatingRowStyle: false,height : 500,width: 728,cssClassNames: StyleRows});
If you want to specify a different style for the alternating even rows, you can define a style similar to what we did in this post and attach it to the property "oddTableRow" instead of “tableRow”. You can also specify images for table rows in the same way we defined them in styling header rows post. But, images for table rows is not a common practice..It applies to headers though.
No comments:
Post a Comment