Subheaders in grid when using constructed list

Question

Hi ... how would I adjust this if using a constructed list?  If .grid_row1 is not there, the subheader doesn't appear.

Comments

Just to add to the solutions currently provided, "Subheaders: Grid" from the Community Question Library supports grid questions that use randomized or constructed lists:

https://sawtoothsoftware.com/resources/question-library/subheaders-grid

Answer 1

Here's how I've solved it.  Undoubtedly a better way to do this - would be keen to see it.  But for now it works.

$(document).ready(function(){
    if([% Q16_r1 %] < 3)
    {
        $(".grid_row1").before("<td colspan='6' class='color'>Self-management</td>");    
    }
    else if([% Q16_r2 %] < 3)
    {
        $(".grid_row2").before("<td colspan='6' class='color'>Self-management</td>");    
    }    
    else if([% Q16_r3 %] < 3)
    {
        $(".grid_row3").before("<td colspan='6' class='color'>Self-management</td>");    
    }
    else if([% Q16_r4 %] < 3)
    {
        $(".grid_row4").before("<td colspan='6' class='color'>Self-management</td>");    
    }
    else if([% Q16_r5 %] < 3)
    {
        $(".grid_row5").before("<td colspan='6' class='color'>Self-management</td>");    
    }
    else if([% Q16_r6 %] < 3)
    {
        $(".grid_row6").before("<td colspan='6' class='color'>Self-management</td>");    
    }
    else if([% Q16_r7 %] < 3)
    {
        $(".grid_row7").before("<td colspan='6' class='color'>Self-management</td>");    
    }    
    
    if([% Q16_r8 %] < 3)
    {
        $(".grid_row8").before("<td colspan='6' class='color'>Non-medical external support</td>");    
    }    
    else if([% Q16_r9 %] < 3)
    {
        $(".grid_row9").before("<td colspan='6' class='color'>Non-medical external support</td>");    
    }    
    else if([% Q16_r10 %] < 3)
    {
        $(".grid_row10").before("<td colspan='6' class='color'>Non-medical external support</td>");    
    }
    else if([% Q16_r11 %] < 3)
    {
        $(".grid_row11").before("<td colspan='6' class='color'>Non-medical external support</td>");    
    }
    else if([% Q16_r12 %] < 3)
    {
        $(".grid_row12").before("<td colspan='6' class='color'>Non-medical external support</td>");    
    }    
    
    
    if([% Q16_r13 %] < 3)
    {
        $(".grid_row13").before("<td colspan='6' class='color'>Consultation with healthcare professionals</td>");    
    }    
    else if([% Q16_r14 %] < 3)
    {
        $(".grid_row14").before("<td colspan='6' class='color'>Consultation with healthcare professionals</td>");    
    }
    else if([% Q16_r15 %] < 3)
    {
        $(".grid_row15").before("<td colspan='6' class='color'>Consultation with healthcare professionals</td>");    
    }
    else if([% Q16_r16 %] < 3)
    {
        $(".grid_row16").before("<td colspan='6' class='color'>Consultation with healthcare professionals</td>");    
    }
    
    if([% Q16_r17 %] < 3)
    {
        $(".grid_row17").before("<td colspan='6' class='color'>Medical intervention – treatment for weight loss/weight management</td>");    
    }    
    else if([% Q16_r18 %] < 3)
    {
        $(".grid_row18").before("<td colspan='6' class='color'>Medical intervention – treatment for weight loss/weight management</td>");    
    }        
    else if([% Q16_r19 %] < 3)
    {
        $(".grid_row19").before("<td colspan='6' class='color'>Medical intervention – treatment for weight loss/weight management</td>");    
    }
    else if([% Q16_r20 %] < 3)
    {
        $(".grid_row20").before("<td colspan='6' class='color'>Medical intervention – treatment for weight loss/weight management</td>");    
    }    
    
});
</script>

Answer 2

More generalized code for this requirement is below.

var subheaders = [ [ [1,4,7], 'alpha', 'yellow'], [ [2,6,9], 'beta', 'green'], [ [3,5,8,10], 'theta', 'red'] ]; //Need to add row values and sub header to be displayed
var list = $('input[name=hid_row_list_[% QuestionName() %]]').val().split(',').map(Number); //mapping / listing the row values in the question
subheaders.forEach(function(subheader){ //we need to iterate this function for array subheader times
var earliestIndex = 9999; //default value of eariest index
for(var i=0; i<subheader[0].length;i++)//we need to iterate a for loop for array in subheaders array
    {
        var thisIndex = list.indexOf(subheader[0][i]); //checking if the row elements exists in the list order
        console.log(thisIndex);
        if (thisIndex != -1 && thisIndex < earliestIndex) { earliestIndex = thisIndex; } //thisIndex will check the position in list if it is present and < earliest index it will store the earliestindex value as thisindex. now the earliestindex value is thisindex not 9999 again it will check all the given values in subheaders
    }
$('#[% QuestionName() %]_r' + list[earliestIndex] +"_row").before("<tr bgcolor='"+subheader[2]+"'><td colspan='8'><b>"+subheader[1]+"</b></td></tr>");//before th earliestindex row we are inserting subheader
}); 
$(".row_label_cell").css("padding-left","20px");//left aligning the row options to differentiate with sub headers