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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...