Dashboards & Visualizations

Highlight clicked row from a table using javascript

D2SI
Communicator

Hello there!

I am trying to highlight a table row whenever clicked:

screen.png

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 🙏

Labels (4)
Tags (1)
1 Solution

niketn
Legend

@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.

Screen Shot 2020-09-05 at 10.49.56 PM.png

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);
        });
     });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@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.

Screen Shot 2020-09-05 at 10.49.56 PM.png

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);
        });
     });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

D2SI
Communicator

Wow! Thanks a lot!

Get Updates on the Splunk Community!

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...