apex:repeat not iterating for null value

Question

Corrected VF code:

<apex:pageBlock ><br/>

    <style>
    TABLE#showcells {
         empty-cells: show 
    }
    </style>

    <apex:outputpanel style="height:Auto;" layout="block">
        <table class="list" cellspacing="0" cellpadding="0" border="0" id="showcells">

            <thead class="rich-table-thead">
                <tr class="headerRow">
                    <td width="115px">&nbsp;</td>
                    <td width="95px" align="center">Indicative OG</td>
                    <td width="95px" align="center">Indicative OU</td>
                    <td width="95px" align="center">Indicative CSG</td>
                    <td width="95px" align="center">Indicative Industry</td>
                </tr>
            </thead>

            <tbody>
                <apex:repeat value="{!Indicativ}" var="varQuarter">
                <tr>
                    <td class="datacell">{!varQuarter.Qrtr}</td>

                    <apex:repeat value="{!varQuarter.Value}" var="Value" >
                        <td class="datacell">{!Value}</td>
                    </apex:repeat> 

                </tr>
                </apex:repeat>
            </tbody>
        </table>
    </apex:outputpanel>

</apex:pageBlock>

And there is a class INSIDE extension such as:

    class arrayIndcValu{

        public String Qrtr              {get;set;}     
        public list<string> Value       {get;set;}

        public arrayIndcValu(){
            this.Qrtr = '';

            this.Value = new list<string>();
        }
    }

And "Indicativ" is a list of type of this above class:

    public list<arrayIndcValu> Indicativ        {get;set;}

"varQuarter" contains values of string like: [PUNE, BANGALORE, NULL, DELHI] The problem is that for 3rd value, which is null in this array, dataCell is not getting rendered and instead, I get out put in 3 cells only for that row. The repeat iterates only 3 times and skips the null value, hence creating only 3 cells.

Output is like:

PUNE BANGALORE DELHI [no cell rendered, blank space]

Output should be:

PUNE BANGALORE [empty cell] DELHI

How to render this empty cell?

Answer 1

I see two possible things you can do to assist yourself in handling this issue.

The first may not be necessary or will only be half of the solution to the problem. Try adding a null value check for this.quarter to your class method and if it's null, put '&nbsp' (a space) in it so the value won't be empty.

Most important will be to add the following to the CSS for your Table:

TABLE { empty-cells: show }

This will prevent the table cell from collapsing when the content is empty or only contains spaces.

EDIT

You will need to specify an Id for the Table and create your CSS as a Custom CSS Class that applies to that Id. Right now you have class=list Is that standard CSS? If not, add the property to that CSS. Otherwise, add the Id to the Table and adjust the CSS above to look something more like this:

TABLE#ShwEmptClls { empty-cells: show }

As in:

<table class="list" Id="ShwEmptClls"> 

Where ShwEmptClls will be the Id of the Table and must be specified in your markup. I would take the other in-line mark-up and add it to your styleclass as well so that it looked like this:

TABLE#ShwEmptClls {
                 display: table; 
                 empty-cells: show;
                 cellspacing: 0;
                 cellpadding: 0; 
                 border: 0
                 {
TABLE#ShwEmptClls.TR {align: center}
TABLE#ShwEmptClls.TD1 {width: 115px; text-align: center}
TABLE#ShwEmptClls.TD2 {width: 95px; text-align: center}
TABLE#ShwEmptClls.TD3 {width: 95px; text-align: center}
TABLE#ShwEmptClls.TD4 {width: 95px; text-align: center}
TABLE#ShwEmptClls.TD5 {width: 95px; text-align: center}

This should save you from having to add all of that inline mark-up you're currently using. Give it a try once you get the initial markup working for you.