ptg 504 CHAPTER 11 Using the GridView Control <asp:ScriptManager ID=”sm1” runat=”server” /> <%= DateTime.Now.ToString(“T”) %> <asp:UpdatePanel ID=”up1” runat=”server”> <ContentTemplate> <asp:GridView id=”grdMovies” DataSourceID=”srcMovies” AllowPaging=”true” EnableSortingAndPagingCallbacks=”true” PageSize=”3” Runat=”server” /> </ContentTemplate> </asp:UpdatePanel> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id,Title,Director FROM Movies” Runat=”server” /> </div> </form> </body> </html> The page in Listing 11.10 includes an UpdatePanel control. Because the GridView is contained in the UpdatePanel, the page containing GridView is not posted back to the server when you page through GridView. The page in Listing 11.10 displays the current time at the top of the page. When you page through the records rendered by the GridView control, the time does not change. Only the contents of the GridView control are modified. Customizing the Paging Interface By default, when paging is enabled, GridView renders a list of page numbers at the bottom of the grid. You can modify the user interface for paging through records by modifying the GridView control’s PagerSettings property. For example, the page in Listing 11.11 contains a GridView that renders First, Previous, Next, and Last links at both the top and bottom of GridView (see Figure 11.7). From the Library of Wow! eBook ptg 505 Gridview Control Fundamentals 11 LISTING 11.11 PageGridPreviousNext.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Page Grid Previous Next</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:GridView id=”grdMovies” DataSourceID=”srcMovies” AllowPaging=”true” PageSize=”3” PagerSettings-Mode=”NextPreviousFirstLast” PagerSettings-Position=”TopAndBottom” PagerStyle-HorizontalAlign=”Center” Runat=”server” /> FIGURE 11.7 Modifying pager settings. From the Library of Wow! eBook ptg 506 CHAPTER 11 Using the GridView Control <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id,Title,Director FROM Movies” Runat=”server” /> </div> </form> </body> </html> The PagerSettings class supports the following properties: . FirstPageImageUrl—Enables you to display an image for the first page link. . FirstPageText—Enables you to specify the text for the first page link. . LastPageImageUrl—Enables you to display an image for the last page link. . LastPageText—Enables you to specify the text for the last page link. . Mode—Enables you to select a display mode for the pager user interface. Possible values are NextPrevious, NextPreviousFirstLast, Numeric, and NumericFirstLast. . NextPageImageUrl—Enables you to display an image for the next page link. . NextPageText—Enables you to specify the text for the next page link. . PageButtonCount—Enables you to specify the number of page number links to display. . Position—Enables you to specify the position of the paging user interface. Possible values are Bottom, Top, TopAndBottom. . PreviousPageImageUrl—Enables you to display an image for the previous page link. . PreviousPageText—Enables you to specify the text for the previous page link. . Visible—Enables you to hide the paging user interface. The PageButtonCount requires more explanation. Imagine that you display the contents of a database table that contains 3 billion records and you display two records per page. In that case, you need to render an overwhelming number of page numbers. The PageButtonCount property enables you to limit the number of page numbers displayed at once. When PageButtonCount has a value less than the number of page numbers, GridView renders ellipses, which enables a user to move between ranges of page numbers. The GridView control includes a PagerTemplate, which enables you to completely customize the appearance of the paging user interface. For example, the page in Listing 11.12 uses a Menu control in a PagerTemplate to display a list of page numbers. The From the Library of Wow! eBook ptg 507 Gridview Control Fundamentals 11 PagerTemplate also includes two LinkButton controls, which represent a Previous and Next link (see Figure 11.8). FIGURE 11.8 Using a template for the paging interface. LISTING 11.12 PageTemplateGrid.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> protected void grdMovies_DataBound(object sender, EventArgs e) { Menu menuPager = (Menu)grdMovies.BottomPagerRow.FindControl(“menuPager”); for (int i = 0; i < grdMovies.PageCount; i++) { MenuItem item = new MenuItem(); item.Text = String.Format(“”,i + 1); item.Value = i.ToString(); if (grdMovies.PageIndex == i) item.Selected = true; menuPager.Items.Add(item); } From the Library of Wow! eBook ptg 508 CHAPTER 11 Using the GridView Control } protected void menuPager_MenuItemClick(object sender, MenuEventArgs e) { grdMovies.PageIndex = Int32.Parse(e.Item.Value); } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> .menu td { padding:5px 0px; } .selectedPage a { font-weight:bold; color:red; } </style> <title>Page Template Grid</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:GridView id=”grdMovies” DataSourceID=”srcMovies” AllowPaging=”true” PageSize=”3” Runat=”server” OnDataBound=”grdMovies_DataBound”> <PagerTemplate> <table> <tr><td> <asp:LinkButton id=”lnkPrevious” Text=”< Prev” CommandName=”Page” CommandArgument=”Prev” ToolTip=”Previous Page” Runat=”server” /> </td><td> <asp:Menu id=”menuPager” From the Library of Wow! eBook ptg 509 Gridview Control Fundamentals 11 Orientation=”Horizontal” OnMenuItemClick=”menuPager_MenuItemClick” StaticSelectedStyle-CssClass=”selectedPage” CssClass=”menu” Runat=”server” /> </td><td> <asp:LinkButton id=”lnkNext” Text=”Next >” CommandName=”Page” CommandArgument=”Next” ToolTip=”Next Page” Runat=”server” /> </td></tr> </table> </PagerTemplate> </asp:GridView> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id,Title,Director FROM Movies” Runat=”server” /> </div> </form> </body> </html> The GridView in Listing 11.12 includes a PagerTemplate that contains a Menu control. When GridView is bound to its data source, the grdMovies_DataBound() method executes and creates menu items that correspond to each page in GridView. When you click a menu item, the page index of GridView is updated. To customize the PagerTemplate, you can add button controls to the template such as the Button, ImageButton,or LinkButton controls. Set the CommandName property of the Button control to the value Page and the CommandArgument property to one of the following values: . Next—Causes the GridView to display the next page of data items. . Prev—Causes the GridView to display the previous page of data items. . First—Causes the GridView to display the first page of data items. . Last—Causes the GridView to display the last page of data items. . Integer Value—Causes the GridView to display a particular page of data items. From the Library of Wow! eBook ptg 510 CHAPTER 11 Using the GridView Control Editing Data The GridView control also enables you to edit database data. The amazing thing is that you can use the GridView to edit the contents of a database table row without writing a single line of code. The page in Listing 11.13 illustrates how you can update and delete records in the Movies database table by using the GridView control (see Figure 11.9). FIGURE 11.9 Editing records with the GridView. LISTING 11.13 EditGrid.aspx <%@ Page Language=”C#” MaintainScrollPositionOnPostback=”true” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Edit GridView</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:GridView id=”grdMovies” DataSourceID=”srcMovies” From the Library of Wow! eBook ptg 511 Gridview Control Fundamentals 11 DataKeyNames=”Id” AutoGenerateEditButton=”true” AutoGenerateDeleteButton=”true” Runat=”server” /> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id,Title,Director FROM Movies” UpdateCommand=”UPDATE Movies SET Title=@Title, Director=@Director WHERE Id=@Id” DeleteCommand=”DELETE Movies WHERE Id=@Id” Runat=”server” /> </div> </form> </body> </html> In Listing 11.13, the GridView control has both its AutoGenerateEditButton and AutoGenerateDeleteButton properties enabled. When these properties are enabled, Edit and Delete links are automatically rendered next to each row in the GridView. NOTE You can take advantage of th e <%@ Page %> directive’s MaintainScrollPositionOnPostback attribute to scroll a page back automatically to the same position whenever the page is posted back to the server. For example, if you add this attribute and click an Edit link rendered by a GridView, the page automatically scrolls to the record being edited. This attribute works with Internet Explorer 6+, Firefox 1+, and Opera 8+. When you click an Edit link, you can edit a particular database row. The GridView auto- matically renders a check box for any Boolean columns and a text field for any other type of column. NOTE The GridView control does not support inserting new records into a database table. If you need to insert new records, use the ListView, DetailsView, or FormView control. From the Library of Wow! eBook ptg 512 CHAPTER 11 Using the GridView Control Furthermore, the GridView control includes a DataKeyNames property. When editing and deleting rows with the GridView, you need to assign the name of the primary key field from the database table being modified to this property. In Listing 11.13, the Movies ID column is assigned to the DataKeyNames property. Finally, the SqlDataSource control associated with the GridView control includes a SelectCommand, UpdateCommand, and DeleteCommand property. These properties contain the SQL statements executed when you display, insert, and delete records with the GridView control. The SQL statements contained in both the UpdateCommand and DeleteCommand include parameters. For example, the UpdateCommand looks like this: UPDATE Movies SET Title=@Title, Director=@Director WHERE Id=@Id The @Title and @Director parameters represent the new values for these columns that a user enters when updating a record with the GridView control. The @Id parameter represents the primary key column from the database table. Handling Concurrency Issues The GridView control can track both the original and modified value of each database column. The GridView control tracks the original and updated values of a column so that you can handle concurrency conflicts. Imagine that you are building a massive order entry system. Your company has hundreds of employees modifying orders with a page that contains a GridView control. If two employees open the same customer record at the same time, one employee might overwrite changes made by the other employee. You can prevent this type of concurrency conflict by using the page in Listing 11.14. LISTING 11.14 Concurrency.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> protected void srcMovies_Updated(object sender, SqlDataSourceStatusEventArgs e) { if (e.AffectedRows == 0) lblMessage.Text = “Could not update record”; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Concurrency</title> </head> From the Library of Wow! eBook ptg 513 Gridview Control Fundamentals 11 <body> <form id=”form1” runat=”server”> <div> <asp:Label ID=”lblMessage” EnableViewState=”false” runat=”server” /> <asp:GridView id=”grdMovies” DataSourceID=”srcMovies” DataKeyNames=”Id” AutoGenerateEditButton=”true” Runat=”server” /> <asp:SqlDataSource id=”srcMovies” ConflictDetection=”CompareAllValues” OldValuesParameterFormatString=”original_{0}” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id,Title,Director FROM Movies” UpdateCommand=”UPDATE Movies SET Title=@Title, Director=@Director WHERE Id=@original_Id AND Title=@original_Title AND Director=@original_Director” Runat=”server” OnUpdated=”srcMovies_Updated” /> </div> </form> </body> </html> In Listing 11.14, the SqlDataSource control includes both a ConflictDetection and OldValuesParameterFormatString property. These two properties cause the SqlDataSource control to track both the original and modified versions of each column. The ConflictDetection property can have one of the following two values: . CompareAllValues . OverwriteChanges By default, the ConflictDetection property has the value OverwriteChanges, which causes the SqlDataSource control to overwrite the previous value of a column with its new value. When ConflictDetection is set to the value CompareAllValues, the SqlDataSource tracks both the original and modified version of each column. The OldValuesParameterFormatString property provides a distinguishing name for the original value of a column. For example, the value of the SqlDataSource control’s UpdateCommand looks like this: From the Library of Wow! eBook . <div> < ;asp: GridView id=”grdMovies” DataSourceID=”srcMovies” AllowPaging=”true” PageSize=”3” PagerSettings-Mode=”NextPreviousFirstLast” PagerSettings-Position=”TopAndBottom” PagerStyle-HorizontalAlign=”Center”. < ;asp: LinkButton id=”lnkPrevious” Text=”< Prev” CommandName=”Page” CommandArgument=”Prev” ToolTip=”Previous Page” Runat=”server” /> </td><td> < ;asp: Menu id=”menuPager” . to specify the position of the paging user interface. Possible values are Bottom, Top, TopAndBottom. . PreviousPageImageUrl—Enables you to display an image for the previous page link. . PreviousPageText—Enables