combining three grids using same rows

Question

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.

Answer 1

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>

Comments

Thanks, Zachary.  This works.  Is there a way to put in the divisions and separate headings for each of the grids that are combined?

---

CSS could be used to add borders or whitespace between combined grid questions, but I'm not sure what you mean about separate headings.  The column labels of the other grid questions should have been moved to the first grid question.

---

Thanks.  Yes, as those are separate questions by column (but with the same rows), I would still need headings to show up.  Maybe separate grids are the only way to do this?

---

I don't know what you mean by headings.

---

I have three separate questions related to the same rows, but the same 3 questions are asked for each row value, so i think I need a row orientation, but I need the questions to show up across the different columns.

---

Are the column labels in the grid questions not satisfactory for your needs?  Do you require an additional row above the normal column labels to provide more text?

---

Yes, it would be good to have the question for the 2nd and 3rd grid above the column labels if possible.

---

This script joins other grids in my survey as well as I added it to the main survey.  Is there a way to just add it to this page?  I tried adding it to the first grid page but it doesn't work.  If not, perhaps using branching is the best option. Thanks for all of your help!

---

To add borders, replace this part of my script:

$(firstTbody).find('> :nth-child(' + row + ')').append($('#' + question + '_div .inner_table > tbody > tr:nth-child(' + row + ') > td:not(.corner_label_cell):not(.row_label_cell)'));

with this:

var tr = $(firstTbody).find('> :nth-child(' + row + ')');
$(tr).children(':last-child').css('border-right', '1px solid black');
$(tr).append($('#' + question + '_div .inner_table > tbody > tr:nth-child(' + row + ') > td:not(.corner_label_cell):not(.row_label_cell)'));

Adding script like this to the first question after the other script would add in a new row to the table with whatever HTML you want:

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div .inner_table > tbody').prepend('<tr><td>first cell</td><td>second cell</td><td>third cell</td></tr>');
})
</script>

The script by default applies to all grid questions on the page with the script.  That would be everywhere if the script was placed in a global survey spot like the HTML head, but only to a single page if applied to just one question.  Additionally, the questions to be used can be explicitly set on line 4:

var questions = ['Q1', 'Q2', 'Q3'];

---

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.