Configuring the GridView and DetailsView controls

Certify and Increase Opportunity.
Be
Govt. Certified ASP.NET Programmer

Configuring the GridView and DetailsView controls

Paging and Sorting Data from a SqlDataSource

Paging and sorting data in a GridView that comes from a SqlDataSource is a breeze with ASP.NET 2.0. As in the demos before, start by adding a SqlDataSource that accesses the desired data. Next, add a GridView. The GridView‘s Smart Tag contains two checkboxes: Enable Paging and Enable Sorting. To turn on sorting and/or paging, simply check the appropriate checkboxes (see Figure 21). It’s that simple!

Note   The SqlDataSource has a DataSourceMode property that you can set to specify if the SqlDataSource returns a DataReader or DataSet, with DataSet being the default. When creating a pageable GridView you must return a DataSet. The GridView‘s sorting capabilities can only be utilized with either a DataSet or a DataReader, but when sorting by returning a DataReader you must retrieve your data from a stored procedure. Furthermore, this stored procedure must accept a parameter indicating the sort expression; specify the name of this input parameter through the SqlDataSource‘s SortParameterName property.

Aa479347.gridview_fg21(en-us,MSDN.10).gif

Figure 21

The ASP.NET page’s declarative syntax can be seen below. As you can see, no source code is needed to create a pageable, bi-directional sortable GridView.

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SqlDataSource ID="productDataSource" Runat="server" 
         SelectCommand="SELECT [ProductName], [UnitPrice], 
         [UnitsInStock], [QuantityPerUnit] FROM [Products]"
            ConnectionString=
            "<%$ ConnectionStrings:NWConnectionString %>">
        </asp:SqlDataSource>
        <asp:GridView ID=" productsGridView" Runat="server" 
         DataSourceID="productDataSource" AutoGenerateColumns="False"
            AllowSorting="True" BorderWidth="2px" BackColor="White" 
            GridLines="None" CellPadding="3"
            CellSpacing="1" BorderStyle="Ridge" BorderColor="White"
            AllowPaging="True">
            <FooterStyle ForeColor="Black" 
               BackColor="#C6C3C6"></FooterStyle>
            <PagerStyle ForeColor="Black" HorizontalAlign="Right" 
               BackColor="#C6C3C6"></PagerStyle>
            <HeaderStyle ForeColor="#E7E7FF" Font-Bold="True" 
               BackColor="#4A3C8C"></HeaderStyle>
            <Columns>
                <asp:BoundField HeaderText="Product" 
                  DataField="ProductName" SortExpression="ProductName">
                </asp:BoundField>
                <asp:BoundField HeaderText="Unit Price" 
                  DataField="UnitPrice" SortExpression="UnitPrice"
                    DataFormatString="{0:c}">
                    <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderText="Units In Stock" 
                  DataField="UnitsInStock" 
                  SortExpression="UnitsInStock"
                    DataFormatString="{0:d}">
                    <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderText="Quantity Per Unit" 
                  DataField="QuantityPerUnit"></asp:BoundField>
            </Columns>
            <SelectedRowStyle ForeColor="White" Font-Bold="True" 
                 BackColor="#9471DE"></SelectedRowStyle>
            <RowStyle ForeColor="Black" BackColor="#DEDFDE"></RowStyle>
        </asp:GridView>
        <i>You are viewing page
        <%=productsGridView.PageIndex + 1%>
        of
        <%=productsGridView.PageCount%>
        </i>
    </div>
    </form>
</body>
</html>

Figures 22, 23, and 24 show the pageable, bi-directional sortable GridView in action. Figure 22 shows page 1 of the data, ordered by Product Name in ascending order. Figure 23 shows page 1, ordered by the Product Name in descending order. Figure 24 shows page 4, ordered by the Unit Price in ascending order.

Notice that the Quantity Per Unit column stands out from the other columns in that it does not have a hyperlink in its header. This means that the data cannot be sorted by Quantity Per Unit. You can specify if a column should be sortable or not by its SortExpression property. Refer back to the ASP.NET page’s declarative syntax and you’ll notice that the last BoundField (the Quantity Per Unit column) lacks a SortExpression attribute, while it’s present for all other BoundFields.

Aa479347.gridview_fg22(en-us,MSDN.10).gif

Figure 22

Aa479347.gridview_fg23(en-us,MSDN.10).gif

Figure 23

Aa479347.gridview_fg24(en-us,MSDN.10).gif

Figure 24

At the bottom of the GridView you’ll find text that informs the end user what page of data they’re currently viewing along with how many total pages of data exist. The GridView exposes a zero-based PageIndex property that specified the current page of data being viewed along with a PageCount property that indicates how many total pages of data are available. To display this information, simply output the necessary markup using <%=…%> delimiters to emit the server-side property values.

<i>You are viewing page
<%=productsGridView.PageIndex + 1%>
of
<%=productsGridView.PageCount%>
</i>

 

–MSDN

Get industry recognized certification – Contact us

Menu