Dashboards & Visualizations

Rendering Cells after updating values

denzelchung
Path Finder

I have a table in my dashboard and the values are updated in JS. For example, if row 1 has the value "DOWN", then row 5 might be affected and it should be updated to "PARTIALLY DOWN".

After the values have been updated, I want to highlight the rows based on their values. "DOWN" should be in red, "PARTIALLY DOWN" in orange, etc.

However, I'm having a problem trying to only render the cells after the values have been updated.
I have tried the following where I added a timeout so that the cells will only be rendered after the values in the table have been updated but it highlights based on the old value.

setTimeout(function() {
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new CustomRangeRenderer());
    tableView.render();
}, 1000);
0 Karma
1 Solution

denzelchung
Path Finder

Fixed it.

Instead of using a cell renderer, I did the updating in the tableView.on('rendered') function.
In there, after updating affected table values to "PARTIALLY DOWN", I added a class to the tag.

// update css - classToAdd is a variable defined elsewhere with a value set
valueTd.addClass(classToAdd).addClass("icon-inline");
// update text
valueTd.html(_.template(' <i></i>', {
    icon: icon,
    text: dict[key]
}));

View solution in original post

0 Karma

denzelchung
Path Finder

Fixed it.

Instead of using a cell renderer, I did the updating in the tableView.on('rendered') function.
In there, after updating affected table values to "PARTIALLY DOWN", I added a class to the tag.

// update css - classToAdd is a variable defined elsewhere with a value set
valueTd.addClass(classToAdd).addClass("icon-inline");
// update text
valueTd.html(_.template(' <i></i>', {
    icon: icon,
    text: dict[key]
}));

View solution in original post

0 Karma

denzelchung
Path Finder

Ok, I removed the cell renderer and moved the updating into the tableView.on('rendered') function and it works.

0 Karma

niketnilay
Legend

@denzelchung please post the updated code as answer and accept the same to assist others facing same issue.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Take the 2021 Splunk Career Survey

Help us learn about how Splunk has
impacted your career by taking the 2021 Splunk Career Survey.

Earn $50 in Amazon cash!