Formatting the DataGrid

for RuBoard

Formatting the `DataGrid`

The DataGrid control can be formatted using many of the techniques mentioned already in this hour . All of the built-in style properties discussed for the DataList are still accessible with the DataGrid with one addition: Because it is possible to edit content directly in the DataGrid , the DataGrid also has a style named EditItemStyle . You can use this to change the appearance of the row currently being modified by a user .

In addition to this type of formatting, you can also tell the DataGrid control to not generate columns automatically and work with the columns directly. This is normally a wise choice; though the automatically generated columns are handy, they will rarely, if ever, be a good choice for a production application. Simply set the AutoGenerateColumns property of the DataGrid to false to turn off automatic generation of columns.

After that is done, you'll need to set up the columns manually using any of the different column types present. Several different kinds of columns are available for different purposes. You saw the BoundColumn at the end of the preceding hour. This is primarily used to add a typical data column to the DataGrid .

However, there's also a TemplateColumn that provides complete control over the appearance of a column in the same way that the ItemTemplate provides complete customization for a DataList . Data fields are added to the HTML in the template through the use of the DataBinder.Eval() method, covered in the preceding hour. One additional column type you can use is the HyperLinkColumn , which enables you to create a hyperlink column, which is normally used to link to a detail screen for the record selected. There is also a ButtonColumn that is very similar to the HyperLinkColumn , except that it generates a button instead of a hyperlink, as you might have guessed.

In addition to these formatting methods , the DataGrid enables you to set up paging for large sources of data. Rather than display 300 items on the screen at once, overwhelming the user, you can display 20 at a time. The code in Listing 12.6 shows how to set up paging for the DataGrid .

You can't use DataGrid paging when binding to a DataReader object. If you need to page through a set of records from a database, use the DataAdapter object instead.

Listing 12.6 Paging with the `DataGrid`

 <% @Page Language="VB" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <HTML> <HEAD>     <LINK rel="stylesheet" type="text/css" href="Main.css">     <!-- End Style Sheet -->     <script language="VB" runat="server" >         Sub Page_Load(Source as Object, E as EventArgs)             LoadDataGrid(orders)         End Sub         Private Sub LoadDataGrid( _                          myDataGrid as System.Web.UI.WebControls.DataGrid)            Dim conn as New SqlConnection("Initial Catalog=Northwind;" + _                                        "Server=(local);UID=sa;PWD=;")            Dim cmd as New SqlCommand("SELECT OrderID, " + _                                      "CustomerID, " + _                                      "OrderDate, " + _                                      "ShipName " + _                                      "FROM Orders", conn)            Dim adapter as New SqlDataAdapter(cmd)            dim dsOrders as New DataSet()            adapter.Fill(dsOrders)            conn.Open()            myDataGrid.DataSource = dsOrders            myDataGrid.DataBind()            conn.Close()         End Sub         Private Sub GetPage(src as Object, e as DataGridPageChangedEventArgs)             src.CurrentPageIndex = e.NewPageIndex             LoadDataGrid(src)         End Sub     </script> </HEAD> <BODY> <h1>Paging With the DataGrid</h1> <hr> <form runat="server" id=form1 name=form1>     <asp:DataGrid id="orders" width="90%"                   BorderColor="SaddleBrown" BackColor="PapayaWhip"                   GridLines="Vertical" cellpadding="4" cellspacing="0"                   Font-Name="Verdana" Font-Size="8pt" ShowFooter="true"                   AutoGenerateColumns="false"                   AllowPaging="true"                   PagerStyle-Mode="NextPrev"                   PagerStyle-PrevPageText="::Previous Page"                   PagerStyle-NextPageText="Next Page::"                   PagerStyle-Visible="true"                   PageSize="10"                   OnPageIndexChanged="GetPage"                   runat="server">         <Columns>             <asp:BoundColumn HeaderText="Order ID" DataField="OrderID" />             <asp:BoundColumn HeaderText="Customer ID" DataField="CustomerID" />             <asp:BoundColumn HeaderText="ShipTo Name" DataField="ShipName" />             <asp:BoundColumn HeaderText="Order Date"                    DataField="OrderDate" DataFormatString="{0:d} " />             <asp:HyperLinkColumn Text="Show Order Details"                  DataNavigateUrlField="OrderID"                  DataNavigateUrlFormatString="orderdetails.aspx?OrderID={0} " />         </Columns>     </asp:DataGrid> </form> <hr> </BODY> </HTML>

As you can see in Listing 12.6, to set up paging for the DataGrid , you first need to specify AllowPaging="true" . Then you can set a number of configurable properties controlling the appearance and location of the paging hyperlinks . Lastly, you must define a method to handle the work of grabbing the next page of data. In this example, a method named GetPage was created to handle this. The new page number is sent to the method through the DataGridPageChangedEventArgs object. Figure 12.7 shows the appearance of a DataGrid when in paging mode.

Figure 12.7. Paging through a `DataTable` with the `DataGrid` .

graphics/12fig07.jpg

for RuBoard