Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

One total row for two numeric grids on same page

I have two column based grids with one numeric column in each that captures a dollar amount.  They both used constructed lists for rows.  Right now I have the Total row showing for each grid, but I need to have ONE Total row that combines both instead.  Is there a way to achieve this?  

Originally they were in one grid but they used sub-headers and that became a problem when I was inserting them with javascript before specific rows if those rows weren't in the constructed list.  So, I split them into two stacked grids instead.  I could use rows in the list to create my sub-header rows but was hoping there might be a way to show the totals from both grids as I have it now.
asked Mar 21, 2019 by Jay Rutherford Gold (33,265 points)
Subheaders with constructed lists are possible if that's the preferred route.  What are you imagining the subheaders looking like?  How would they look in mobile grids?
This is the script I was using on the original grid where the lists were static.  I have the column header being shown before row 13 and then two different sub-headers.  Both repeating the header row and inserting the sub-header rows became an issue on the follow up grids where the lists are constructed.  Ultimately I would see the sub-header showing right below the column headers.  That is ultimately what I am doing now with splitting it into two grids.  I would love to see a solution for inserting sub header rows with the use of grids with constructed row lists, but if there is a way to created a total row for the two grids as I have it now, I'd like that as well.  

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_r13_row').before($('#[% QuestionName() %]_div .column_header_row:first-child').clone());
    $('#[% QuestionName() %]_div .inner_table > tbody > tr:even > td').removeClass('alt_color2').addClass('alt_color1');
    $('#[% QuestionName() %]_div .inner_table > tbody > tr:odd > td').removeClass('alt_color1').addClass('alt_color2');
})
</script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
     $('#Q11B_r8_row').before('<tr style="background-color: gray"><td colspan="7"> <font size="2">&nbsp;<b>Back Office / Financial Management</b></font> </td></tr>');
     $('#Q11B_r13_row').before('<tr style="background-color: gray"><td colspan="7"> <font size="2">&nbsp;<b>Front Office</b></font> </td></tr>');});
</script>

1 Answer

+1 vote
 
Best answer
I took a stab at modifying "Subheaders" for your grid question:

<style>
#[% QuestionName() %]_div tr.grid_subheader > td {
    background-color: gray;
}
</style>

<script>
$(document).ready(function(){
    // Parameters
    var subheaders = [
        [8, 12, 'Back'],
        [13, 99, 'Front']
    ];
    
    // Run
    var columnsCount = $('input[name="hid_col_list_[% QuestionName() %]"]').val().split(',').length;
    
    var list = $('input[name="hid_row_list_[% QuestionName() %]"]').val().split(',').map(Number);
    subheaders.forEach(function(subheader){
        var earliestIndex = 99999;
        for (var item = subheader[0]; item <= subheader[1]; item++) {
            var index = list.indexOf(item);
            if (index != -1 && index < earliestIndex) {
                earliestIndex = index;
            }
        }
        if (earliestIndex != 99999) {
            $('#[% QuestionName() %]_r' + list[earliestIndex] + '_row').before('<tr class="grid_subheader"><td colspan="' + (columnsCount + 1) + '">' + subheader[2] + '</td></tr>');
        }
    });
})
</script>


Does this suit your needs?
answered Mar 21, 2019 by Zachary Platinum Sawtooth Software, Inc. (131,725 points)
selected Mar 21, 2019 by Jay Rutherford
That looks like it's doing what I need.  That would be a great addition to the Question Library as I know there is a similar solution for select questions with sub-headers and constructed lists.

The only potential issue I have is repeating the header row before the 'Front' section.  As of now, my script is inserting it before row 13, which is an issue if row 13 isn't included OR if none of 8-12 are included, then I get the header row twice.
I originally planned on having a similar item in the Community Question Library for grid questions, but there were a few loose ends I wasn't sure how to handle.  What defines a subheader in a grid - a new row above the others, a new first column that spans over a collection of rows, something else?  If it's a new row, does the text fill one cell or the whole row?  How do alternating colors fit into this?  How does this work for column-oriented grids?  How does this work for mobile grids?  Just seemed like a lot of ambiguity about what people would want when they imagine subheaders in grids.

Here's an update to the column headers-repeating script that should only do the repeat action if item 13 and one of items 8-12 appear in the row list:

$(document).ready(function(){
    var list = $('input[name="hid_row_list_[% QuestionName() %]"]').val().split(',').map(Number);
    if (list.indexOf(13) != -1 && (list.indexOf(8) != -1 || list.indexOf(9) != -1 || list.indexOf(10) != -1 || list.indexOf(11) != -1 || list.indexOf(12) != -1) {
        $('#[% QuestionName() %]_r13_row').before($('#[% QuestionName() %]_div .column_header_row:first-child').clone());
        $('#[% QuestionName() %]_div .inner_table > tbody > tr:even > td').removeClass('alt_color2').addClass('alt_color1');
        $('#[% QuestionName() %]_div .inner_table > tbody > tr:odd > td').removeClass('alt_color1').addClass('alt_color2');
    }
})
...