topic Re: Highlight clicked row from a table using javascript in Dashboards & Visualizations

Highlight clicked row from a table using javascript

D2SI — Sat, 05 Sep 2020 05:57:35 GMT

Hello there!

I am trying to highlight a table row whenever clicked:

This is the JavaScript I use to highlight a row based on a cell string value:

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 status field return _(["host"]).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 status field // Since we have picked only one row for applying range Class, following if is not required. if (cell.field === "host") { //Add range class based on cell values. if (value == "test") { $td.addClass("range-cell").addClass("range-green"); } } // Update the cell content with string value $td.text(value).addClass('string'); } }); mvc.Components.get('highlight').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); }); },100); }); // Add custom cell renderer, the table will re-render automatically. tableView.addCellRenderer(new CustomRangeRenderer()); }); });

It works with this dashboard:

<dashboard script="script.js"> <label>test</label> <row> <panel> <table id="highlight"> <search> <query>| makeresults | eval host="test" | append [| makeresults | eval host="hello"] | table host</query> <earliest>0</earliest> <latest></latest> </search> <option name="drilldown">cell</option> <drilldown> <set token="clicked_row_tok">$click.value$</set> </drilldown> </table> </panel> </row> <row> <panel> <title>$def$</title> <html> <style> #highlight tr.range-green td { background-color: #F2B827 !important; } </style> </html> </panel> </row> </dashboard>

But instead of highlighting a row based on a value, I would like to highlight the clicked row (token $clicked_row_tok$)

So I guess I have to implement something like this:

// Access the "default" token model var defaultTokenModel = mvc.Components.get("default"); defaultTokenModel.on("change:clicked_row_tok", function(newTokenName, clicked_row_tok, options) { ... } });

To be able to do this:

if (cell.field == clicked_row_tok) {

But I am struggling mixing them both so I am here for help 🙏

Re: Highlight clicked row from a table using javascript

niketn — Sat, 05 Sep 2020 17:32:33 GMT

@D2SI Following requirement is confusing... "But instead of highlighting a row based on a value, I would like to highlight the clicked row"

If you want clicked Row to be highlighted try the following Run anywhere example on similar lines as yours.

Following is the Simple XML Dashboard:

<dashboard script="table_highlight_row_on_cell_click.js"> <label>Table Clicked Row Highlight</label> <row> <panel> <html> <style> #highlight table tr.highlighted{ border-style: solid !important; border-color: skyblue !important; background: orange !important; } #highlight table tr.highlighted td{ background: orange !important; border: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } </style> </html> <table id="highlight"> <search> <query>index=_internal sourcetype=splunkd | stats count by log_level</query> <earliest>-24h@h</earliest> <latest>now</latest> <sampleRatio>1</sampleRatio> </search> <option name="count">100</option> <option name="dataOverlayMode">none</option> <option name="drilldown">cell</option> <option name="percentagesRow">false</option> <option name="refresh.display">progressbar</option> <option name="rowNumbers">false</option> <option name="totalsRow">false</option> <option name="wrap">true</option> <drilldown> <set token="tokValue2">$click.value2$</set> </drilldown> </table> </panel> </row> </dashboard>

Following is the required JavaScript table_highlight_row_on_cell_click.js

require([ 'underscore', 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/tableview', 'splunkjs/mvc/simplexml/ready!' ], function(_, $, mvc, TableView) { // Color Clicked Row of table with id #highlight $(document).on("click","#highlight",function(){ // Apply class of the cells to the parent row in order to color the whole row $("#highlight table").find('td.highlighted').each(function() { $("#highlight table tr").removeClass("highlighted"); $(this).parents('tr').addClass(this.className); }); }); });

Re: Highlight clicked row from a table using javascript

D2SI — Sat, 05 Sep 2020 17:54:37 GMT

Wow! Thanks a lot!