Add Footers/ Summary in Google Grids

Problem Statement:

Google Grids do not have direct implementation for adding footers to the grid. So there is no direct provision for having a fixed total row in Google Charts- table (Google grids).

To achieve this, we need to add an extra row; add this row to the end of the table. We also need to ensure that the row is added even after pagination and sorting is performed on the grid.

So here we go:

1.      Declare this variable at top of your script

footer = [[‘1st column text’,1st_ColSpan],[‘2nd column text’,2nd_ColSpan],….];

 

Example :

footer=[[‘Total’,5],[‘1,234,567’,1]];

// <—assume our table have 6 columns

 

 

 

2.      Add this function to your script (anywhere)

function addFooter() {try {

if (document.getElementById(‘google-visualization-table-summaryFooter’)) return;

 

var tables = $(‘#parentID table’); // Parent container element of table. To                                                                                                             //find exact table

 

for (i = 0; i < tables.length; i++)

if (tables[i].className == ‘google-visualization-table-table’) {

var r = tables[i].insertRow(tables[i].rows.length);

r.id = ‘google-visualization-table-summaryFooter’ // This ID should be same as in the IF condition of the first line of this //function

var c;

r.className = ‘google-visualization-table-tr-head’;

for (j = 0; j < footer.length; j++) {

c = r.insertCell(j);

c.className = ‘google-visualization-table-th gradient’;

c.style.textAlign = (j == 0) ? ‘start’ : ‘right’;

c.innerHTML = footer[j][0]

c.colSpan = footer[j][1]

}

}

}

catch (ex) {

// Exception Logging

}

}

 

 

3.      Add these event listener before table.draw() method

 

google.visualization.events.addListener(table, ‘ready’, addFooter);

google.visualization.events.addListener(table, ‘sort’, addFooter);

google.visualization.events.addListener(table, ‘page’, addFooter);

 

Enjoy!!

You have your footer in the table as you want. Additionally you can apply custom styles based on the footer row ID to visually enhance the experience.

 

Comments

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s