Have an idea?

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

Add a 2nd text column in a grid


In grid with just a constant sum column, i'm trying to add a second column, as text, with values from a previous question.  for example, I want something like :

                       before  now
newitem                    ____
item4              60       ____
item7              40       ____

The "before" column is just text (no input fields), pre-filled with values from a previous question (Q1) which did not have the "new item"

Any quick workaround to trick the grid to allow the second text column?

thank you!
asked Aug 13, 2019 by marinica (160 points)

1 Answer

0 votes
It takes a bit of formatting, but you can set up grids in each of your row labels and in the corner label on the grid text tab to simulate 2 columns for the row labels instead of 1.

For instance, put this in the corner label on the Grid Text tab of your grid question.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <td width="50%"> &nbsp; </td>
  <td> before </td>

Then for the label of your row items use this (be sure to set your row labels to left justify):

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <td width="50%"> item 4 </td>
  <td> 60 </td>

You may have to play with the formatting tab for your Width of Labels Column % and you may also need to try different width % in the script I showed.  I've had to use this type of set up quite often and visually will give you what you are looking for.
answered Aug 14, 2019 by Jay Rutherford Gold (34,155 points)
Thanks for chipping in, Jay.  I would also mention that if you are going to add a column like this, you will want to disable the mobile grid functionality in the question's settings.
Thanks for that Zach, that's a great point!
Also wanted to point out that the "60" above in the "before" result could be scripted. So to recall a previous answer, you'd replace the 60 with [% GetValue(VariableName) %]. One other issue: If you're using constructed lists for these grids, you may need to have one list with the original labels, and a second with the "table" labels. To get these two different parent lists to match up, use the "Mirror" command in list building to make two identical lists, but with different parent lists.
Thanks Aaron for chiming in.  That is a step I always have to do (using the Mirror command) when I've had to structure things in this way and I probably should have mentioned that.
thank you guys for the help,

in the end i managed to simply put the "before" value in the brackets next to the item so i'm good for now.

thanks again!
I'm trying to set up something along these lines.  My question is whether it is possible to add a vertical line between the two row items so that it is easy to read when the text is longer.  I have managed to do this using <th> header rows but then I have an issue that there is cell spacing between the rows which aren't mimicked in the column input cells so it looks messy.
So you want a single vertical line between "item 4" and "60" / "item 7" and "40" in the original example?
Hi Zachary
Yes - that's what I'm trying to achieve!
We'll need to take a bit of a different approach for that.  Try adding this to your grid question:

#[% QuestionName() %]_div .inner_table > tbody > tr > td:first-child {
    border-right: 1px solid black;

    // Parameters
    var texts = ['alpha', 'beta', 'gamma', 'delta'];
    // Run
    for (var i = 0; i < texts.length; i++) {
        var original = $('#[% QuestionName() %]_div .inner_table > tbody > tr:nth-child(' + (i + 1) + ') > td:first-child');
        var clone = $(original).clone();

Line 10 can be updated what texts to show in the second column.  Here's an example with Sawtooth Script:

var texts = ['[% Q1 %]', '[% Q2 %]', '[% Q3 %]'];
Thanks Zachary - that works a treat!