How to use Subheader in Grid

Question

How can I use Subheader in Grid?

Is it possible?

Thanks

Answer 1

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

Comments

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.