I was just trying to use the same example javascript and css with different search query, but i'm not able to get the rows colored.
Please help in this.
Trial.js
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for both the Age and the State field
return _(['Age', 'State']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = parseFloat(cell.value);
// Apply interpretation for number of historical searches
if (cell.field === 'Age') {
if (value > 2) {
$td.addClass('range-cell').addClass('range-elevated');
}
}
// Apply interpretation for number of realtime searches
if (cell.field === 'State') {
if (value > 1) {
$td.addClass('range-cell').addClass('range-severe');
}
}
// Update the cell content
// $td.text(value.toFixed(2)).addClass('numeric');
}
});
mvc.Components.get('Trial').getVisualization(function(tableView) {
// Add custom cell renderer
tableView.table.addCellRenderer(new CustomRangeRenderer());
tableView.on('rendered', function() {
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
});
// Force the table to re-render
tableView.table.render();
});
});
Trial.css
/* Row Coloring */
#highlight tr td {
background-color: #c1ffc3 !important;
}
#highlight tr.range-elevated td {
background-color: #ffc57a !important;
}
#highlight tr.range-severe td {
background-color: #d59392 !important;
}
#highlight .table td {
border-top: 1px solid #fff;
}
#highlight td.range-severe, td.range-elevated {
font-weight: bold;
}
XML:
<dashboard script="Trial.js" stylesheet="Trial.css">
<label>Trial</label>
<row>
<table id="Trial">
<title>Trial</title>
<search>
<query>source="Trial.csv" host="10.0.255.247" sourcetype="csv"|table Timestamp User Age State</query>
<earliest>-24h</earliest>
</search>
<option name="drilldown">none</option>
<option name="wrap">true</option>
<option name="rowNumbers">false</option>
<option name="dataOverlayMode">none</option>
<option name="count">10</option>
</table>
</row>
</dashboard>
Hopefully you've already figured out the answer, as I'm about four months late to the party here, but for future reference:
The reason your rows wouldn't highlight is because your CSS selectors are wrong. Notice that, in the XML, your table has id="Trial". Thus, you need to target #Trial with your CSS selectors, rather than #highlight (as the example uses id="highlight" for its table).
Fixed CSS (only necessary fix to get row highlighting working):
/* Row Coloring */
#Trial tr td {
background-color: #c1ffc3 !important;
}
#Trial tr.range-elevated td {
background-color: #ffc57a !important;
}
#Trial tr.range-severe td {
background-color: #d59392 !important;
}
#Trial .table td {
border-top: 1px solid #fff;
}
#Trial td.range-severe, td.range-elevated {
font-weight: bold;
}
Hi everyone;
You are not able to get the rows colored because you have some mistakes in your trial.css file:
In your css file, remove this And it'll work very well.
#highlight tr td {
background-color: #c1ffc3 !important;
}
Now here was the problem:
You gave background color to you table and after you gave some color to your rows; this make a conflict and it's the raison why there is no rows colored.
I'm also interested in this solution, I've tried this before but in the end gave up.
Also , from the javascript i wanted to know, (from the 35th Block of code)
tableView.table.addCellRenderer(new CustomRangeRenderer());
tableView.on('rendered', function() {
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
What is 'rendered' ? Is this common to all examples / I need to modify this ?
This is very similar to the example data. Even i exported the same example data and just tired it with column name different. But , I am not getting the rows colored. Instead some fields bold