ASP.NET How to recreate the following HTML in a Gridview
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">
开发者_如何学Go <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>
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.
I would use a ListView instead. It's a little more flexible, and you can just spit out table rows through the item template. It won't be the prettiest HTML ever, but if you're looking to use one of the provided ASP.NET controls for the job, that's probably the most forgiving.
I think you can get away with something like this:
<table cellpadding="3" cellspacing="0">
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<tr>
<td>Test</td>
<td>Test again</td>
</tr>
</ItemTemplate>
</asp:DataList>
</table>
精彩评论