My webpage features a "Reports" page that will dynamically display buttons (formatted ASP:Hyperlinks) based on the number of active reports in a table. While everything works well, I am struggling with achieving the desired layout. I want my buttons to appear side by side, with one column serving as an "ItemTemplate" and the other as an "AlternatingItemTemplate".
HTML Code:
<asp:Panel runat="server">
<asp:GridView ID="gv_Reports" runat="server" DataKeyField="ReportId" HorizontalAlign="Center" ShowHeader="False" AutoGenerateColumns="False" BorderStyle="None" GridLines="None">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="buttonLinks" CssClass="reportButton" Text='<%# Bind("RepName") %>' href='<%#String.Concat("ReportParams.aspx?reportId=") & Eval("ReportId")%>' runat="server"></asp:HyperLink>
</ItemTemplate>
<AlternatingItemTemplate></AlternatingItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField>
<AlternatingItemTemplate>
<asp:HyperLink ID="buttonLinks" CssClass="reportButton" Text='<%# Bind("RepName") %>' href='<%#String.Concat("ReportParams.aspx?reportId=") & Eval("ReportId")%>' runat="server"></asp:HyperLink>
</AlternatingItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
CSS Code:
.reportButton {
display:block;
height:25px;
width:250px;
background:#f1f1f1;
padding:15px 10px 10px 10px;
margin: 0px 10px 0px 10px;
font-size:14px;
text-align:center;
border-radius:5px;
border:1px solid #e1e1e2;
font-weight:bold;
text-decoration:none;
}
I am aiming for a layout like this:https://i.stack.imgur.com/GL5Tz.png
To achieve this, I want the gaps to close on both sides and the right column to shift upward, creating a clean 4-row by 2-column set of buttons.
One solution I considered is using two grids side by side and populating them with alternating records. However, I prefer to stick with just one dataset if possible.