September 12, 2012

Asp.Net GridView can be used to display a large amount of data on a page. Sometimes it would be a better design to style the GridView to display with background colours for alternate rows and a different background colour on hover. The GridView control already has AlternateRowStyle property for setting the alternate colours on rows. The hover feature can be implemented by using css styles.

Here is an example of how to declare the GirdView.

GridView
  1. <asp:GridView ID="Grid1" runat="server" CellPadding="4" ForeColor="#333333"
  2.         GridLines="None">
  3.     <AlternatingRowStyle BackColor="White" />
  4.     <EditRowStyle BackColor="#2461BF" />
  5.     <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
  6.     <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
  7.     <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
  8.     <RowStyle BackColor="#EFF3FB" />
  9.     <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
  10.     <SortedAscendingCellStyle BackColor="#F5F7FB" />
  11.     <SortedAscendingHeaderStyle BackColor="#6D95E1" />
  12.     <SortedDescendingCellStyle BackColor="#E9EBEF" />
  13.     <SortedDescendingHeaderStyle BackColor="#4870BE" />
  14. </asp:GridView>

The AlternateRowStyle property sets the background colour of alternate row and the RowStyle’s BackColor property set the background colour of the row.

The GridView is rendered as a table and the hover feature can be implemented using css as per below.

GridView Css Styles
  1. <style type="text/css">
  2. table tr:hover { background-color:#eee;}
  3. table tr td:hover { background-color:#ccc;}
  4. </style>

September 5, 2012

From .NET framework, data in a GridView can be selected by either row index or data index. The EnablePersistedSelection property of the GridView caters for this feature. By default, EnablePersistedSelection is set to false and data is selected by row index. When this property is set to false and a row is selected, the same row number remains selected when navigated to a different page. When this property is set to true and a row is selected, the same row is not selected on a different page. However, when navigated back to the same page, the selected row remains selected. To set the property to true, the DataKeyNames property needs to be filled in with the data key for the GridView.

Sample code on how to set the properties are below.

GridView Persisted Selection
  1. <asp:GridView ID="GV1" runat="server" EnablePersistedSelection="True"
  2.         DataKeyNames="skuid" CellPadding="4" ForeColor="#333333" GridLines="None">
  3.     <AlternatingRowStyle BackColor="White" />
  4.     <Columns>
  5.         <asp:HyperLinkField DataNavigateUrlFields="skuid"
  6.             DataNavigateUrlFormatString="product.aspx?skuid={0}"
  7.             DataTextField="productName" />
  8.     </Columns>
  9.     <Columns><asp:CommandField ButtonType="Button" ShowSelectButton="true" /></Columns>
  10.     <EditRowStyle BackColor="#2461BF" />
  11.     <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
  12.     <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
  13.     <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
  14.     <RowStyle BackColor="#EFF3FB" />
  15.     <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
  16.     <SortedAscendingCellStyle BackColor="#F5F7FB" />
  17.     <SortedAscendingHeaderStyle BackColor="#6D95E1" />
  18.     <SortedDescendingCellStyle BackColor="#E9EBEF" />
  19.     <SortedDescendingHeaderStyle BackColor="#4870BE" />
  20.     </asp:GridView>
Reference: Shahed Kazi at AspNetify.com