I have a dashboard with 1 table and the following code works. It adds a CSS class to the tag as expected.
However, if I add more tables on the same dashboard, the code works on certain refreshes and not on others. I tried playing around with the timeout value and didn't manage to find a solution. With 1-3 tables in the dashboard, it works on the times I tried, but 4 or more tables will cause an erratic behavior.
mvc.Components.get('table1').getVisualization(function(tableView) {
setTimeout(function() {
tableView.on('rendered', function() {
// Populate dictionary with values from table
var tableRows = tableView.$el.find('tbody').children();
$.each(tableRows, function(index, row) {
var children = $(row).children();
var key = children.eq(0).text();
var value = $.trim(children.eq(1).text());
if (value == "0") {
$(row).addClass("range-down");
}
else {
$(row).addClass("range-ok");
}
});
// Update table display
tableView.render();
})
}, 100);
});
I used the cell renderer method and it also faces the same problem.
var CustomCellRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for the time field
return _(['time']).contains(cell.field);
},
render: function($td, cell) {
var value = cell.value;
if (value == "0") {
$td.addClass('range-cell').addClass("range-down");
}
else {
$td.addClass('range-cell').addClass("range-ok");
}
$td.text(value);
}
});