Google Chart Table Remove the selection

Question

I am currently working with the Google chart tables. I have a problem with the selections. I want to turn the selections off, but it seems to be impossible. I even tried (an real ugly way) like an event listener on the select part that uses the method clearChart() to remove this.

Here is the test sourche code. Note that i cant use this in jsfiddle

Click to copy

<script type="text/javascript" src="https://www.google.com/jsapi" ></script>
<script type="text/javascript">
google.load("jquery", "1");

google.load('visualization', '1', {packages:['table']});

     function drawVisualization()
     {
          var data = google.visualization.arrayToDataTable([
          ['', 'Name', 'E-mail', 'Activated', 'Last login'],
          ['<input type="checkbox">', 'name1', 'name1@company.xxx', true, '20-07-2012'],
          ['<input type="checkbox">', 'name2', 'name2@company.xxx', true, '21-07-2012']

               ]);

               var options = {};
               options['showRowNumber'] = false;
               options['page'] = 'enable';
               options['allowHtml'] = true;
               options['pageSize'] = 18;
               options['pagingButtonsConfiguration'] = 'auto';

               var visualization = new google.visualization.Table(document.getElementById('table'));
               visualization.draw(data, options);
          }

          google.setOnLoadCallback(drawVisualization);

</script>
<div id="table"></div>

The problem is that if I use these checkboxes the (blue) selection is anoying and confusing.

Thanks.

Answer 1

Another option is to reset the selection when the "select" event is fired:

Click to copy

google.visualization.events.addListener(visualization, 'select', selectHandler);

function selectHandler() {  
    visualization.setSelection([])
}

Here's an example: http://jsfiddle.net/Rxnty/

This immediately removes the selection without requiring a redraw.

Answer 2

One way to achieve what the effect you desire is to tell the API what class should be applied when the row is selected, allowing you to keep specify the background-color of the row.

JS:

Click to copy

options['cssClassNames'] = {}
options['cssClassNames']['selectedTableRow'] = 'selected';

CSS:

Click to copy

.selected { background-color: white; }

You can see it working on jsfiddle.