CODEWITHSUNDEEP
google-visualization
rok
rok

Reputation: 597

Retrieving row data from chart wrapper table after changing a control wrapper

I have a chart wrapper table and a 'select' event listener bound to it for retrieving row data as follows:

var table = new google.visualization.ChartWrapper({
                    'chartType': 'Table',
                    'containerId': 'tableDiv',
                    'options': {
                        'allowHtml': true,
                        'page': 'enable',
                        'width':'100%',
                        'height':'270px',
                        'pageSize': 10,
                    }
                });

google.visualization.events.addListener(table, 'ready', function () {

                    google.visualization.events.addListener(table, 'select', function(){
                                 var selection = table.getChart().getSelection();
                                 var row = selection[0].row;

                                 var x=dataTable.getValue(row, 1); 
                                 var y=dataTable.getValue(row,3);
                    });
});

Now this works fine when I'm on the first page of the table or when the full table is displayed. However, as soon as some sorting/filtering/pagination is done the retrieved row data is false, due to the fact that the hidden rows are not counted.

Example: I have a table with 10 rows. In each one there is a string - 'row1', 'row2', 'row3'... 'row10'. I then use a control wrapper to filter the table so only rows 5-10 remain visible. When I click on row 5 now, it counts it as row 1 and I don't get the correct data anymore.

Any ideas how I could fix this problem?

Thanks

Upvotes: 1

Views: 1616

Answers (2)

Metric Rat
Metric Rat

Reputation: 316

I had a similar problem, but in my case needed to retrieve the value in a column not displayed by the table in the Chartwrapper. Fortunately I have a unique index in my table, so I grabbed this value, then filtered the rows of the dataTable to find the row index containing the value, then converted this value to an integer, and finally used this to select the correct row, after selection to select the value from, in this case a url to open in a new window

var view = new google.visualization.DataView(dataTable);
view.setRows(view.getSortedRows({column: 11, desc: true}));
view.setColumns([11,0,2,3,4,5,6,7,8,9]);

//create the handler for the selection on the table
google.visualization.events.addListener(table, 'select', selectHandler);

    function selectHandler() {
    var selection = table.getChart().getSelection();
    for (var i = 0; i < selection.length; i++) {
        var item = selection[i];
        if (item.row != null) {
            var id = table.getDataTable().getValue(item.row,0);
            var urlRow = dataTable.getFilteredRows([{column: 11, value: id }]);
            urlRow = parseInt(urlRow);
            var url = dataTable.getFormattedValue(urlRow, 10);
            window.open(url,'_blank');
        }
    }
}

Upvotes: 0

WhiteHat
WhiteHat

Reputation: 61230

instead of using the original dataTable

use the one from the ChartWrapper

this will return the filtered data table 

google.visualization.events.addListener(table, 'select', function(){
  var selection = table.getChart().getSelection();
  var row = selection[0].row;

  var x=table.getDataTable().getValue(row, 1); 
  var y=table.getDataTable().getValue(row,3);
});

Upvotes: 1

Related Questions