conditional logic within nested Repeater

Question

I have two repeaters, 1 nested within the other. The Inner Repeater contains and displays basically a grid of text boxes to allow the user it enter in sets of information.

If there are 0 items for the nested child, there is no issue. Otherwise, there will always be in increments of 4, pairs of text boxes. If there is 4 pairs we want to display all 4 pairs on 1 line, it there are 8 pairs, we need a line break between the first 4 and the second 4 pairs, and so on for 12.....

I was attempting this with purely CSS, based on the size of what the area was and the size of the boxes forcing it to put it on a new line, but is there a cleaner way of doing this with a repeater? I have noticed on some browsers and OS I run into it wrapping awkwardly.

<ItemTemplate>
<tr>
    <td>&nbsp;</td>
        <td>
            <asp:Label runat="server" ID="lbDayOfWeek"  Text='<%# DataBinder.Eval(Container.DataItem, "DayOfWeek") %>'/>
        </td>
        <td>
            <asp:Label runat="server" ID="lbDate" Text='<%# Format(DataBinder.Eval(Container.DataItem, "DateOfDay"), "MM/dd/yyyy") %>'/>
        </td>
        <td class="punches">
        <asp:Repeater runat="server" ID="Punches" DataSource='<%# DataBinder.Eval(Container.DataItem, "PunchPairs") %>'>
                <HeaderTemplate>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:TextBox runat='server' ID='Tb1' Text='<%# if(eval("InDefault")= false,DataBinder.Eval(Container.DataItem, "InTime"),"") %>' />
                    <asp:TextBox runat='server' ID='Tb2' Text='<%# if(eval("OutDefault")= false,DataBinder.Eval(Container.DataItem, "OutTime"),"") %>' />
                </ItemTemplate>
                <FooterTemplate>
                </FooterTemplate>
        </asp:Repeater>
        </td>
        <td class="Totals">
            <asp:TextBox ID="txtHours" runat="server"  Text='<%# DataBinder.Eval(Container.DataItem, "TotalHrs") %>' ReadOnly='true'/>
        </td>
    <td>&nbsp;</td>
</tr>

Answer 1

Yes you can do that with CSS with help of ItemDataBound event of the child repeater

On itemDatabound event

Private Sub Punches_DataBound(sender As Object, e As RepeaterItemEventArgs) Handles Punches.ItemDataBound
    If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
        Dim XDiv As HtmlGenericControl = CType(e.Item.FindControl("XDiv"), HtmlGenericControl)
        XDiv.Attributes("Class") += " Item" & (e.Item.ItemIndex Mod 4)
    end if 
end sub 

and in item template of Punches

<ItemTemplate>
    <div runat="server" id="XDiv" class="Item">
        <asp:TextBox runat='server' ID='Tb1' Text='<%# if(eval("InDefault")= false,DataBinder.Eval(Container.DataItem, "InTime"),"") %>' />
        <asp:TextBox runat='server' ID='Tb2' Text='<%# if(eval("OutDefault")= false,DataBinder.Eval(Container.DataItem, "OutTime"),"") %>' />
    </div>
</ItemTemplate>

And CSS to float them

.Item{
  float:left;
}

.Item0{
  clear:both;
}