Have an idea?

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

Add text boxes to grid

Dear all,

I have a grid with multiple lines and 4 checkboxes per line. I would now like to add a textbox right to the checkboxes in each line. Is this at all possible and if yes can you please help?

thanks
asked Feb 8 by Armin

1 Answer

0 votes
 
Best answer
This can only be done out-of-the-box by setting the question direction to column-oriented.  But I understand this is not always an option.  To achieve this with row-oriented grid questions, what you'll need to do is create two grid question on the same page: the first with the four checkbox-type columns, the second with the open-end-type column.  Then you can add this script to the page to combine the questions so they look like only one question:

<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>


The column widths may look a little off.  If so, you could manually define the column widths with CSS.  Here's an example that changes the first three columns:

<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 Feb 8 by Zachary Platinum Sawtooth Software, Inc. (184,925 points)
Thanks, but my grid is a single answer per row.

I have removed all require responses to these 2 questions when I keep all blank still go to the next page. How can I fix this?
...