Have an idea?

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

Adding a row to a grid if something was entered in a previous row

I have a grid question with 10 rows containing open-end input fields and some dropwdown lists.

Is it possible to initially display only one row and to hide the other rows?

The next row should only be displayed when something (text) is entered in the first open-end input field of the previous row.

I know this is close to the "Row-by-Row Grid"-solution, but that one only works for a grid question with radio buttons.

Thank you!
asked Feb 13 by goldmax
"Branching" could handle this if you could split the grid question out into multiple questions.

If that's not an option, "Row-by-Row Grid" definitely gets us close.  The trick with getting it to work with other inputs types is that those input types don't have as clear of a "done" state.  If a row has checkboxes, when should it allow the respondent to continue to the next row - one check? zero checks? some other amount?

I think I could modify "Row-by-Row" for your needs, but I would need to know what your "done" state is.  Is a dropdown row done when each dropdown has a non-default answer?  Is an open-end row done when each open-end has at least one character entered?
Thanks for the quick answer!

I also thought that the "Row-by-Row Grid" would bring me closer to the solution, since branching is unfortunately not an option, as our system only works with a connected grid.

In this case the done-state would be at least one letter in the first open-end input field (r1_c1), the other fields are more or less irrelevant for this functionality.
Okay, so open-end rows should show the follow-up row once column 1 has any response.  You also mentioned some rows with dropdowns - how should the code determine when to show the row that follows a dropdown row?
The grid looks like this (oe = open-end, dd = dropdown):

          c1   c2   c3    c4   c5  c6    c7   
r1     oe   oe   dd  dd  oe   dd   dd

If something is entered in the first open end-field, then the next row is shown, an exact (empty) copy of the previous row, including all dropdowns and other open-end fields.

1 Answer

+1 vote
To start, I think you'll want to disable mobile grids if you haven't already.

Then, you can add this script to your grid question:

<style>
#[% QuestionName() %]_div .inner_table > tbody > tr:not(:nth-child(1)):not(:nth-child(2)) {
    display: none;
}
</style>

<script>
$(document).ready(updateRowByRow);
$(document).on('keyup', 'input[id^="[% QuestionName() %]_"][id$="_c1"]', updateRowByRow);

function updateRowByRow() {
    var rows = $('input[name="hid_row_list_[% QuestionName() %]"]').val().split(',');
    for (var r = 0; r < rows.length - 1; r++) {
        var row = rows[r];
        var answered = $('#[% QuestionName() %]_r' + row + '_c1').val().trim();
        if (answered) {
            $('#[% QuestionName() %]_div .inner_table > tbody > tr:nth-child(' + (r + 3) + ')').show();
        }
        else {
            break;
        }
    }
}
</script>
answered Feb 13 by Zachary Platinum Sawtooth Software, Inc. (144,125 points)
That is exactly what I needed,  thank you!
...