Have an idea?

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

How to use Subheader in Grid

How can I use Subheader in Grid?

Is it possible?

Thanks
asked Sep 28, 2020 by Saroeun Bronze (2,715 points)

1 Answer

0 votes
 
Best answer
Hi Saroeun,

Please add below script in the footer of the grid question. In "grid_row1", change row number before which you want to add the subheader. Then give the colspan and change it to 1+number of columns.

<script>
$(document).ready(function(){
    $(".grid_row1").before("<td colspan='6'>ABC</td>");
    $(".grid_row3").before("<td colspan='6'>PQR</td>");
});
</script>


Using above script, the text "ABC" will appear as a header before row 1 if the question has 5 columns. And the text "PQR" will appear as a header before row 3 if the question has 5 columns.

I hope this helps.

Regards,
Rahul Mittal
answered Sep 28, 2020 by Rahul Mittal Gold (11,635 points)
selected Sep 28, 2020 by Paul Moon
Rahul, do you have some script to change the text colour and the background colour of the sub-group header? Thanks Paul.
Yes Paul. I have added a class "color" to the subheader. And then add the css to that class.

<script>
$(document).ready(function(){
    $(".grid_row1").before("<td colspan='6' class='color'>ABC</td>");
    $(".grid_row3").before("<td colspan='6' class='color'>PQR</td>");
});
</script>

<style>
.color {
    color: blue;
    background: yellow;
}
</style>
Nice work mate. Excellent!

Much appreciated.

Good to have this handy idea in the tool kit.
I've thought about having something like this in the Community Question Library, but wasn't sure the right way to go about applying headers to a table.  Would one of the three options at this JSFiddle be best?  Is there another option that would be better?

https://jsfiddle.net/ZacharySawtoothSoftware/r5osa06x/1/

Ideally the solution would also work for mobile grid questions, but that problem seems more straight forward.
I like maintaining same layout on mobile as desktop. Hence, applied above script.

If Rows become separate on mobile is ticked, the script can be modified to below:

<script>
$(document).ready(function(){
    $(".grid_r1").parent().before("<td colspan='6' class='color'>ABC</td>");
    $(".grid_r3").parent().before("<td colspan='6' class='color'>PQR</td>");
});
</script>

<style>
.color {
    color: blue;
    background: yellow;
}
</style>
Hey Zach,
I like all the 3 ways that you suggested. They all can be easily programmed using simple js. Let me know in case of any questions. Thanks.
Hi Zachary, I have had the request for the standard row approach that was initially mentioned on  this forum post. I like the column solution too.

I do like the other options too but I have never had those requested before.

It will make a nice Question Library addition I'm sure.
Subheaders in grid when using constructed list
...