How to collapse all subtotal rows on table rendering

1 post / 0 new
Anders
Anders's picture
How to collapse all subtotal rows on table rendering

Today I got a question if there was any way to get all subtotal rows to start off as collapsed in tables rendered with subtotals.

This feature does not have this option in the dialog but of course it can be scripted in each dashboard where you want this behaviour.

If you are new to JavaScript and/or jQuery you should really do some tutorials and learn the basics of this language to get the most out of the AnalyzePRO platform!

About the script

The AnalyzePRO platform triggers a range of events. One of them, dataElementRendered, is triggered every time a visualization (of any type) is done rendering.
A handler for this event has the complete ElementResponse object available as a input parameter.

Tables rendered with subtotals has this built-in behaviour of expanding and collapsing the subnodes on click.
So one way of collapsing all nodes could be to simulate click on all these header rows before the rendered table is displayed to the user:

/* jQuery document ready handler wraps eventhandlers*/
$(document).ready(function(){

  /* 
    dataElementRendered is handeled for the visualization named elContainer_1
    Have a look at http://services.businessanalyze.com/community/node/205 for details on custom events and container IDs
  */
  $("body").on("dataElementRendered","#elContainer_1",function(evt,elRes){
    
    // Trigger click on all leading tablecells
    $(this).find("td.subtotalLeading").trigger("click");
  });
});

All well and done!
-Your table is collapsed and only the top level data is displayed to the user

The next level

If you want to go a step further, you want to add plus/minus icons explaining that clicking on the row will cause the table rows to expand or collapse accordingly?

The following script will do the trick:

/* jQuery document ready handler wraps eventhandlers*/
$(document).ready(function(){

  /* 
    dataElementRendered is handeled for the visualization named elContainer_1
    Have a look at http://services.businessanalyze.com/community/node/205 for details on custom events and container IDs
  */
  $("body").on("dataElementRendered","#elContainer_1",function(evt,elRes){
    
    // Trigger click on all leading tablecells
    $(this).find("td.subtotalLeading").trigger("click");

    // Add minus icon to collapsing row
    $(this).find("td.subtotalLeading").each(function(){
      var currTD = $(this);
     
      currTD.html("<img src='../../Common/Layouts/Standard/Images/icons/sub.gif'/> " + currTD.text());
    });

    // Add plus icon to expanding row
    $(this).find("tr[data-subtotalgrp]").each(function(){
      var currTD = $(this).find("td.subtotalClosing").eq(0);
     
      currTD.html("<img src='../../Common/Layouts/Standard/Images/icons/sub_plus.gif'/> " + currTD.text());
    });
  });

  /* 
    Every time rows are expanded, hide the minus sign icon (which are placed in the sum row)
  */
  $("body").on("click","tr[data-subtotalgrp]", function(evt){
    $(this).find("img").hide();
  });

  /*
    Every time rows are collapsed, show the minus sign icon
  */
  $("body").on("click","td.subtotalLeading", function(evt){
    var subtotalGrp = $(this).attr("data-subtotalgrp");
    $(this).parents("tbody").find("tr[data-subtotalgrp='" + subtotalGrp + "'] img").show();
  }); 
});

Happy coding!