Have an idea?

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

combining three grids using same rows

I am interested in combining three grids that all rely upon the same rows. What script would be needed to join those?  This will be used on a large tablet.
asked Jan 15 by sallen Bronze (905 points)

1 Answer

0 votes
Please try adding this script to the page:

<script>
$(document).ready(function(){
    // Params
    var questions = [];
    
    // Run
    if (!questions.length) {
        $('.grid.question').each(function(){
            questions.push(this.id.replace(/_div$/, ''));
        });
    }
    
    var firstQ = questions.shift();
    
    questions.forEach(function(question){
        $('#' + question + '_div').hide();
    });
    
    if (!$('#' + firstQ + '_div .mobile_grid').length) {
        var firstTbody = $('#' + firstQ + '_div .inner_table > tbody');
        for (var row = 1; row <= $(firstTbody).children().length; row++) {
            questions.forEach(function(question){
                $(firstTbody).find('> :nth-child(' + row + ')').append($('#' + question + '_div .inner_table > tbody > tr:nth-child(' + row + ') > td:not(.corner_label_cell):not(.row_label_cell)'));
            });
        }
    }
    
    else {
        var firstMobileGrid = $('#' + firstQ + '_div .mobile_grid');
        for (var row = 1; row <= $(firstMobileGrid).children().length; row++) {
            questions.forEach(function(question){
                $(firstMobileGrid).find('> :nth-child(' + row + ') .mobile_grid_options').append($('#' + question + '_div .mobile_grid > :nth-child(' + row + ') .mobile_grid_options').children());
            });
        }
    }
})
</script>


You may find the column widths to look a little strange.  If this is the case, you can manually set the width each column is meant to have with CSS.  Here's an example for the first three columns that you can place in the first grid question:

<style>
#[% QuestionName() %]_div .inner_table > tbody > tr > td:nth-child(1) {
    width: 10%;
}

#[% QuestionName() %]_div .inner_table > tbody > tr > td:nth-child(2) {
    width: 10%;
}

#[% QuestionName() %]_div .inner_table > tbody > tr > td:nth-child(3) {
    width: 10%;
}
</style>
answered Jan 15 by Zachary Platinum Sawtooth Software, Inc. (164,025 points)
Thanks.  Maybe I am adding it to the wrong place on the page? I am putting it under advanced-javascript  on the first grid but that doesnt seem to work.
That area is for verification code (e.g., not allowing respondents to continue if they have provided an invalid response).  Basically any other spot in the question settings will work - common preferences are the footer text or the question's HTML head section.
Thanks!  I have it working but it doesn't look great.  Is there a way to get the row that was added for the labels to line up with the divisions (first label with first group, second with second, etc)?  If not, I can see if this question would work better with branching rather than as a grid.
You can change the HTML of that snippet to whatever you want.  If your grid questions have multiple column list items, you probably want to use "colspan" in the "<td>" elements.
Thanks.  I will try that.
...