Question

Hey I am trying to recreate the following HTML

<table border="0" cellspacing="0" cellpadding="2" width="100%" id="productListTable">
    <tr>
        <th rowspan="2">Product Name</th>
        <th rowspan="2" >Pack Size</th>
        <th rowspan="2" >Trade Price</th>

        <th colspan="2"  style="border:none;">Discount</th>
        <th rowspan="2" >Actual Price</th>
        <th rowspan="2">Stock</th>
        <th rowspan="2">Quantity</th>
    </tr>
    <tr class="sub">
        <th >PLC</th>

        <th >Total</th>
    </tr>

In my Gridview the first tr is no problem as this can just be standard header text in my columns but I am wondering how I can add this sub tr

<tr class="sub">
    <th >PLC</th>

    <th >Total</th>
</tr>

And also how to add this style, to my existing column

<th colspan="2"  style="border:none;">Discount</th>

Heres my gridview at the moment

<asp:GridView ID="productListTable" runat="server" DataSourceID="srcProductListPerCustomer" AutoGenerateColumns="False" AlternatingRowStyle-CssClass="tr_dark"  HeaderStyle-CssClass="header_req" BorderWidth="0px" GridLines="None" AllowPaging="true" PageSize="25" EmptyDataText="No records." AllowSorting="false" Width="100%" DataKeyNames="product_ID_key" OnRowDataBound="productListTable_RowDataBound" OnRowCommand="productListTable_RowCommand"  >         
    <Columns>                         
            <asp:TemplateField HeaderText="Product Name" HeaderStyle-Width="250px" SortExpression="productName" ItemStyle-CssClass="product_name" >
                <ItemTemplate>   
                <asp:Label ID="ProductNameField" runat="server" Text='<%# Eval("productName").ToString() %>'></asp:Label>
                </ItemTemplate>                     
            </asp:TemplateField> 

    </Columns>
    <Columns>                         
            <asp:TemplateField HeaderText="Pack Size" HeaderStyle-Width="70px" SortExpression="packSize">
                <ItemTemplate>  
                <asp:Label ID="PackSizeField" runat="server" Text='<%#  Eval("packSize").ToString()%>'></asp:Label>
                </ItemTemplate>                     
            </asp:TemplateField> 

    </Columns>
    <Columns>                         
            <asp:TemplateField HeaderText="Trade Price" HeaderStyle-Width="130px" SortExpression="address">
                <ItemTemplate>   
                <asp:Label ID="TradePriceField" runat="server" Text='<%#  DisplayMoney(Eval("tradePrice").ToString())%>'></asp:Label>
                <asp:Label ID="TradePriceFieldHidden" runat="server" Text='<%#  Eval("tradePrice").ToString()%>' Visible="false"></asp:Label>
                </ItemTemplate>                     
            </asp:TemplateField> 

    </Columns>
    <Columns>                         
            <asp:TemplateField HeaderText="Discount" HeaderStyle-Width="60px" SortExpression="discount">
                <ItemTemplate>   
                <asp:Label ID="DiscountField" runat="server" Text='<%# Eval("discount").ToString() + "%" %>'></asp:Label>
                </ItemTemplate>                     
            </asp:TemplateField> 

    </Columns>
    <Columns>                         
            <asp:TemplateField HeaderText="Actual Price" HeaderStyle-Width="130px" SortExpression="actualPrice">
                <ItemTemplate>   
                <asp:Label ID="ActualPriceField" runat="server" Text='<%#  DisplayMoney(Eval("actualPrice").ToString())%>'></asp:Label>
                </ItemTemplate>                     
            </asp:TemplateField> 

    </Columns>
    <Columns>                         
            <asp:TemplateField HeaderText="Stock" HeaderStyle-Width="130px" SortExpression="stock_indicator">
                <ItemTemplate>   
                <asp:Label ID="StockField" runat="server" Text='<%# DisplayStockLevel(Eval("stock_indicator").ToString()) %>'></asp:Label>
                </ItemTemplate>                     
            </asp:TemplateField> 

    </Columns>
     <Columns>  

    <asp:TemplateField HeaderText="Quantity">
                    <ItemTemplate>
                        <asp:TextBox runat="server" ID="txtQuantity" Columns="5"></asp:TextBox><br />
                        <asp:LinkButton runat="server" ID="btnRemove" Text="Remove" CommandName="Remove" CommandArgument='<%# Eval("product_ID_key") %>' style="font-size:12px;" Visible="false"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
    </Columns>
    <HeaderStyle CssClass="header_req" />
    <AlternatingRowStyle CssClass="tr_dark" />
    <PagerStyle CssClass="pagination" />
    <PagerSettings PageButtonCount="3" FirstPageText="First" LastPageText="Last" NextPageText="Next" PreviousPageText="Previous" Mode="NumericFirstLast" />      
</asp:GridView>

Answer 1

I’m not sure about your current scenario, but it seems like you might want to take a look at the ListView control.

Out of the box GridView tends to create a ton of extra HTML to get it to look right. I’m not sure you’ll ever be able to get exactly what you’re looking for that way.

I did see that you have some paging stuff in there; if you go the ListView route, you’ll want to use a DataPager as well.