How to apply rangeIndicators to all columns i table view?

1 post / 0 new
Anders's picture
How to apply rangeIndicators to all columns i table view?


Have you ever wanted to make a columns range indicator definition to be applied to all columns in table view?

This feature is not part of the application's standard features yet but you can quite easily create this effect by inserting some JavaScript into the dashbaoard properties dialog.

How to do it

First you need to find out the ID of your ElementContainer (container of your visualization).
You can find this inside "Edit ElementContainer" dialog, Advanced section.
It is a string of format "elContainer_X" where X is a integer/index.

Second you need to open the "Dashboard Properties" dialog and insert the below script into the codearea named "Scripts (JS) included in page header" in the "Advanced" tab:

  // Apply rangeIndicator to all columns
  var sourceColumnName = "Severity";
  $("body").on("dataElementRendered", "#elContainer_2", function(evt,elRes){
    var elContainer = $(this);
    var columnIdx = 0;
    // Get column index from element request
    $.each(elRes.ElementRequest.DataFactory.Columns, function(cIdx,column){
       if(column.Name == sourceColumnName){
         columnIdx = cIdx;

    // Apply color and background-color to all cells (TDs) on each row
    elContainer.find("table:first tbody tr").each(function(rIdx,row){
      // Get colors from tablecell with [columnIdx] index
      var color = $(row).find("td").eq(columnIdx).css("color");
      var bgColor = $(row).find("td").eq(columnIdx).css("background-color");
      // Apply css colors to all tablecells on this row
        $(cell).css({"color": color, "background-color": bgColor});

To make this work in your dashboard you need to update the two red strings above:

sourceColumnName should match the Column Alias / system name of the column that holds the range indicator to use.
"elContainer_2" should match your ElementContainer.

Happy coding!

-Drop a comment below if you have any questions