require([ 'underscore', 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/tableview', 'splunkjs/mvc/simplexml/ready!' ], function(_, $, mvc, TableView) { var CustomRangeRenderer = TableView.BaseCellRenderer.extend({ canRender: function(cell) { // Enable this custom cell renderer for NETWORK field return _(["NETWORK"]).contains(cell.field); }, render: function($td, cell) { // Add a class to the cell based on the returned value var value = cell.value; // Apply interpretation for NETWORK field // Since we have picked only one row for applying range Class, following if is not required. if (cell.field === "NETWORK") { //Add range class based on cell values. if (value == "OK") { $td.addClass("range-cell").addClass("range-green"); } if (value == "NOT OK" ) { $td.addClass("range-cell").addClass("range-red"); } } // Update the cell content with string value $td.text(value).addClass('string'); } }); mvc.Components.get('tblTooltip').getVisualization(function(tableView) { tableView.on('rendered', function() { // Add a delay to ensure Custom Render applies to row without getting overridden with built in reder. setTimeout(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); $(this).parents('tr').addClass(this.className); }); },100); }); // Add custom cell renderer, the table will re-render automatically. tableView.addCellRenderer(new CustomRangeRenderer()); }); });
... View more