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

<script type="text/javascript" src="" ></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', '[email protected]', true, '20-07-2012'],
          ['<input type="checkbox">', 'name2', '[email protected]', 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.

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

<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', '[email protected]', true, '20-07-2012'],
          ['<input type="checkbox">', 'name2', '[email protected]', 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.

• javascript
• html
• css
• google-visualization

2 Answers 2

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

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.

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:

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

CSS:

.selected { background-color: white; }

You can see it working on jsfiddle.