Thanks to @niketn I can now click on a table row, and get the whole row highlighted as needed. Step 1: When clicking on a row, the selected row is highlighted (Working OK)
What I am trying to do is:
Step2: I have multi-select inputs and when "All" is selected in multi-select, I want to remove the highlight from the table row.
Step3: Also would like to highlight multiple rows if more than one choice is selected in multi-select.
I am new to JS and tried the below JS for Step 2 but it isn't working. Any help would be appreciated
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {
// Access tokens via Default Token Model
var defaultTokenModel = mvc.Components.get("default");
// Search id in Simple XML is tableSearch. Get SearchManager object using the same
var tableSearch = mvc.Components.get("tableSearch");
// On click of Table cell with id=highlight, set the highlighted class for CSS Override
// Fetch the highlighted row id from DOM.
// For pagination will require:
// (i) Either Row ID as a table column to be fetched OR
// (ii) Use TableView to handle Custom Cell Renderer
$(document).on("click", "#highlight table td", 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);
// Set Table Row id to highlighted_row_id (This approach would need change for pagination)
defaultTokenModel.set("highlighted_row_id", $(this).parents("tr").attr("data-row-index"));
});
});
// When the Table Cell Completes, highlight previously selected Table Row.
tableSearch.on("search:done", function(properties) {
var highlighted_row_id = defaultTokenModel.get("highlighted_row_id");
// setTimeout May not be required with Custom Cell Render.
// But for Table Row Highlighting post 6.6 even with Custom Table Cell Renderer this is required.
setTimeout(function() {
$("#highlight table tr[data-row-index='" + highlighted_row_id + "']").addClass("highlighted");
}, 100);
});
$('#multi'), on("change", function() {
var multi = mvc.Components.get("multi");
var tokens = mvc.Components.get("default");
var mytoken = tokens.get("multi");
if (mytoken.length > 1 && mytoken.includes("All")) {
var highlighted_row_id = defaultTokenModel.get("highlighted_row_id");
$("#highlight table tr[data-row-index='" + highlighted_row_id + "']").removeClass("highlighted");
}
});
});
... View more
