Working with the DataGrid Control - Objectives

Working with the DataGrid Control - Objectives

Working with the DataGrid Control Web Pages and Web Services Professional Skills Development 7-1 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Working with the DataGrid Control Objectives • Learn how to set up the DataGrid control. • Configure the DataGrid control to edit data. • Take advantage of advanced features of the DataGrid control.

Working with the DataGrid Control 7-2 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. Introduction to the DataGrid The DataGrid control is one of three controls that allow you to work with data in an ASP.Net pagethe other two are the Repeater control and the DataList control, which are covered in another chapter. Each of the controls is configurable from the Visual Studio development environment, and each control renders the HTML it needs to display its interface and data. The DataGrid Web server control allows you to display data in a grid, or tabular layout (it doesn’t support snaking columns). The DataGrid defaults to displaying data in read-only mode, but you can configure it to display data in editable controls at run time.

In addition, you can create Select, Edit, Update, and Cancel buttons that enable users to modify data. If needed, you can configure paging and sorting for the DataGrid as well. The DataGrid relies less on templates, and more on properties and styles. It is much like the DataList control in that it supports selecting, editing, and deleting data. Unlike the DataList control, however, the DataGrid control supports templates only within columns, and unlike the DataList and Repeater controls, the DataGrid control doesn’t require templates in order to do its work.

The DataGrid has a rich user interface, which allows you to configure it without writing any code, by working with its properties in the Visual Studio environment. There’s far more to the DataGrid control than can be covered in a single chapter. This chapter can get you started, but you’ll need to experiment and alter the examples provided here to get the full benefit of the DataGrid control.

Setting Up the DataGrid Web Pages and Web Services Professional Skills Development 7-3 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. Setting Up the DataGrid In order to demonstrate the simplicity and power of the DataGrid control, this section will walk you through adding an instance of the control to a new project, and setting up the various properties you need to use in order to bind it to a simple DataSet object.

You’ll note, as you work through this example, that we’ve elected to use some of the user-interface-oriented data management tools provided by Visual Studio .NET. Although the DataGrid control doesn’t require them, this seemed as good a time as any to introduce these useful tools. Using the User-Interface Data Tools The DataGrid control can bind itself to various types of data sources, but you’ll most often bind it to an ADO.NET DataSet object. Other chapters in the course describe how to create SqlConnection (or OleDbConnection) objects, SqlDataAdapter (or OleDbDataAdapter) objects, and DataSet objects, using Visual Basic .NET code.

And those are all valid techniques for working with data.

Microsoft provides tools that make it even easier to create these data management objects, and they’re especially useful when working with user- interface controls. You’ll see, as you work through this chapter, how simple it is to build connection strings, command text, and other data management properties. Just as you would require when working completely in code, creating a DataSet visually requires several steps: You must create a connection of some type, and a command and/or data adapter to retrieve the data. Because you’re going to try to bind a DataGrid control to data, you’ll also need a DataSet object.

The steps in this chapter will show how you can create these objects visually.

TIP: Data binding isn’t completely code-free. No matter how hard you try, you’ll find that you need to write at least a few lines of code in order to bind a DataGrid control to any data source. Try It Out! 1. Create the project: Open Visual Studio and Choose File|New|Project. This loads the New Project dialog box. Select Visual Basic Projects in the left See the DataGrid solution for the completed example

Working with the DataGrid Control 7-4 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. pane, and ASP.NET Web Application in the right pane, as shown in Figure 1. Fill in the name (DataGrid) and click OK. Figure 1. Creating a new project. 2. Add a DataGrid control: Choose View|Toolbox from the menu (or press CTRL+ALT+X). Double-click on the DataGrid control in the Toolbox, or drag the DataGrid control from the Web Forms tab of the Toolbox onto the page.

Add a SqlConnection 3. Click on the Data tab in the Toolbox window, then drag a SqlConnection object onto the page and press F4 to load the Properties window. 4. Select ConnectionString in the Properties window, click the drop-down list, and select . Select the Northwind database on your local SQL Server as the data source, as shown in Figure 2. TIP: Depending on how and where you’ve installed SQL Server, you may need to alter the settings from those we’ve used here. If in doubt, talk with your SQL Server administrator. We will assume throughout the course that you’ve installed SQL Server 7.0 or later on your local machine and have the necessary permissions granted to access data in the Northwind database.

Setting Up the DataGrid Web Pages and Web Services Professional Skills Development 7-5 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Figure 2. Specifying the SqlConnection for the DataSet. Add a SqlDataAdapter In order to be able to retrieve the data, you must create a SqlDataAdapter object. In the following steps, you’ll create one visually, using the tools provided in the Data Toolbox.

Working with the DataGrid Control 7-6 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. 1. From the Data tab on the Toolbox, drag a SqlDataAdapter onto the form. Walk through the Data Adaptor Configuration Wizard to select the SqlConnection and Use SQL Statements options. 2. On the Generate the SQL Statements page, click Query Builder to load the Products table from the Northwind database into the query builder, as shown in Figure 3. Select the ProductID, ProductName, UnitPrice, and UnitsInStock columns. (If you right-click on the dialog box and select Run from the context menu, you’ll see the actual data, as shown in Figure 3.) 3. Sort by ProductName and click OK.

Figure 3. Building a query for the SqlDataAdapter. 4. Click Advanced Options, and deselect the Generate Insert, Update, and Delete Statements option. This example doesn’t require these features. Click OK to close the dialog box.

5. Click Finish to complete the steps required to create the SqlDataAdapter. Add a Dataset and Bind the DataGrid You’ll need a DataSet object in order to display the data in your DataGrid control. Although you can create a standard DataSet object in code, Visual Studio .NET provides the capability of creating a Typed DataSet. A Typed

Setting Up the DataGrid Web Pages and Web Services Professional Skills Development 7-7 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited.

DataSet is a class that encapsulates the behavior of a DataSet, providing properties corresponding to each of the fields in the data source. Although using a Typed DataSet isn’t required, it makes it a lot easier to bind the DataGrid to your data. Without this extra step, you would have to create the DataSet in code.

Try It Out! Follow these steps to create a Typed DataSet and bind the DataGrid control to the new DataSet: 1. Right-click on the SqlDataAdapter1 object, and select Generate DataSet from its context menu. In the Generate Dataset dialog box, shown in Figure 4, note that the SqlDataAdapter you created in an earlier step is already selected. Click OK. This creates a DataSet named DataSet11. Figure 4. Adding a Dataset based on the SqlDataAdapter.

Working with the DataGrid Control 7-8 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. 2. Select the DataGrid control and set its DataSource property to Dataset11, as shown in Figure 5. Set the DataMember to Products, and the DataKeyField to ProductID (this tells the DataGrid which field is the primary key). Figure 5. Setting the DataGrid’s DataSource property to the DataSet. TIP: Because a DataSet object can contain multiple DataTable objects, you may need to indicate which table you want to display by setting the DataMember property of the DataGrid. In this case, your DataSet contained only one DataTable, but it’s still a good idea to indicate which DataTable you need.

Setting Up the DataGrid Web Pages and Web Services Professional Skills Development 7-9 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. 3. Once you set the DataGrid’s DataSource property, the DataGrid control generates a bound column for each field in the data source. Each field in the data source is rendered in a separate column, in the order it occurs in the data source. Field names appear in the grid’s column headers, and values are rendered in text labels, as shown in Figure 6. Figure 6. The page in Design view has column information filled in once the DataSource property for the DataGrid is set.

4. Apply some formatting by right-clicking on the DataGrid and choosing Auto Format from the menu. Select one of the formats shown in Figure 7. Click OK. Figure 7. Use AutoFormat to quickly apply formatting to the DataGrid. Use the Property Builder You’ll most likely want to control the behavior and layout of the grid more carefully than you can by simply selecting data and a formatting style. In order

Working with the DataGrid Control 7-10 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. to get that control, you can either manipulate the HTML for the page manually, or you can use the Property Builder provided by Visual Studio .NET. The Property Builder’s a lot easier, and this section walks you through setting more properties of the DataGrid control, using the Property Builder dialog box. Try It Out!

Follow these steps to configure the columns in the DataGrid control: 1. Right-click on the grid and choose Property Builder. This enables you to customize the display of the DataGrid, as shown in Figure 8. In this dialog box, make sure the Show header and Allow sorting options are selected. NOTE Even though you’ve selected the option to allow sorting, no sorting occurs automatically. You’ll learn how to write code to implement this feature later in the chapter. Figure 8. Setting additional options for the DataGrid.

Setting Up the DataGrid Web Pages and Web Services Professional Skills Development 7-11 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. 2. Click the Columns node at the left side of the DataGrid1 Properties dialog box to display the properties for the grid’s columns. Clear the Create columns automatically at runtime option (see Figure 9). Rather than having the grid select the columns, you’re going to do it manually. TIP: The DataGrid can be configured to pull in data automatically from a data source. If you do this, however, your grid will contain all the columns contained within the data source. In the examples here, we’ve elected to turn off this option and define the columns manually.

3. Select the (All Fields) node from the Available Columns list, then click > to copy all the fields to the Selected Columns list. Highlight each in turn, modifying the Header Text for each, as you see fit. 4. For each column, set the Sort expression to be the column itself, and perhaps add spaces to the Header text so that the names are more readable. In addition, you can set a Data formatting expression for the fields. For example, you might enter {0:C} to force formatting as currency. Figure 9 shows UnitPrice with a Data formatting expression set to display the field as currency.

TIP: Under the covers, the page will use the {0:C} as a replaceable formatting parameter The “0” indicates that this is the replacement for the 0th parameter (starting with 0, of course), and the “:C” indicates the formatting to use for the parameter.

For more information on formatting numbers, look in the online help, searching for the topic “Standard Numeric Format Strings.”

Working with the DataGrid Control 7-12 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Figure 9. Setting column display properties.

Setting Up the DataGrid Web Pages and Web Services Professional Skills Development 7-13 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. 5. Click the Paging node to manually configure paging for the DataGrid.

For this example paging is turned off, as shown in Figure 10. You’ll learn how to control paging later in this chapter. Figure 10. Configuring paging for the DataGrid.

Working with the DataGrid Control 7-14 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. 6. Click the Format node to define column widths and apply any custom formatting to the grid, as shown in Figure 11. Here, we’ve set the horizontal alignment for the Unit Price column to be right-aligned. (The default for all columns is left-aligned.) Figure 11. Specifying custom formatting.

Setting Up the DataGrid Web Pages and Web Services Professional Skills Development 7-15 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. 7. If you select the Columns node within the Objects tree, you can set the width for each column. Figure 12 shows formatting the ProductName column as a percent, taking up 70 percent of the DataGrid. This leaves 30 percent to divide among the ID, Unit Price, and Units in Stock columns. (Using percent values for the widths keeps the column widths in proportion when users resize the page.) Figure 12. Configuring each column as a percent of the whole.

Working with the DataGrid Control 7-16 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. 8. Click Borders to specify the border color and width, as shown in Figure 13. Click OK when you’re finished. Figure 13. Configuring the borders for the DataGrid. Behind the Scenes The nice thing about the Property Builder is that it generates all the HTML necessary to display the DataGrid properlyyou don’t need to generate it yourself. Click the HTML tab to view the generated HTML, and you’ll see the HTML for the page, including the description of the DataGrid control.

We’ve reformatted the HTML for the DataGrid as follows: See Webform1.aspx

Setting Up the DataGrid Web Pages and Web Services Professional Skills Development 7-17 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Display the DataGrid in Browser View Although you’ve been able to get this far without writing any code at all, you’ll need to write some in order to display the DataGrid in Browse view. Although the Web form designer allows you to create controls and set their properties, it doesn’t generate the code to initialize and run them. The following procedure in the page’s Load event uses the IsPostBack property to see if the page is being loaded for the first time.

If so, the code loads the data into the DataSet, calling the Fill method of the DataAdapter. Next, the code calls the DataBind method of the DataGrid, causing it to bind to the data source, and render the data display.

See Webform1.aspx.vb

Working with the DataGrid Control 7-18 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Private Sub Page_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load 'Put user code to initialize the page here 'Runs first time page loads If Not Page.IsPostBack Then 'Load the data SqlDataAdapter1.Fill(Dataset1) 'Bind the data to the grid DataGrid1.DataBind() End If End Sub To test the DataGrid, select the page in the Solution Explorer.

Right-click and choose Build and Browse from the menu. This loads it into the browser, as shown in Figure 14.

Figure 14. Building and displaying the DataGrid. The DataGrid doesn’t do much at this point except display a list of products. The following sections explain how to implement additional features available in the DataGrid control.

Using Advanced DataGrid Features Web Pages and Web Services Professional Skills Development 7-19 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Using Advanced DataGrid Features The DataGrid control has many more built-in features than the simple ones you’ve seen so far.

The DataGrid control provides many rich server-side capabilities that make it an excellent choice for interacting with data. In addition to simply displaying data in a grid, the DataGrid possesses the following capabilities: • Supports paging through the data displayed in the control, moving forward, backward, or by page number.

• Displays active hyperlinks in DataGrid columns. • Automatically displays data in editable controls at run time. • Adds Select, Edit, Update, and Cancel buttons to the DataGrid when data is being edited. Figure 15 displays the completed DataGrid control with editing capabilities and with paging, which is displayed by page numbers in the DataGrid’s header section. In addition, each product item has a hypertext link to another page that displays more information about each product. Figure 15. The DataGrid control with editing and paging capabilities. See the DataGridComplete solution

Working with the DataGrid Control 7-20 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. Clicking on one of the numbered page buttons in the header or footer sections displays the ten items specified for that page, as shown in Figure 16, which displays the items on page 6. Figure 16. You can scroll to a numbered page. If you press the Select button, the display changes, as shown in Figure 17 where Sasquatch Ale is selected.

Figure 17. The selected item is formatted differently than the surrounding items.

Using Advanced DataGrid Features Web Pages and Web Services Professional Skills Development 7-21 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Clicking on the Edit button for a selected item displays additional buttons for Update and Cancel operations and displays the Unit Price and Units in Stock fields in editable controls, as shown in Figure 18. Figure 18. Editing data in the DataGrid.

The following sections show you how to set up the DataGrid to implement these features.

Data Binding In the first section of this chapter you learned how to use the SqlConnection, SqlDataAdapter and DataSet design-time controls to bind data to the DataGrid. This section takes a different approach by performing all the data binding in code. In this example, all the data binding will be done by hand, using code to create the various objects. In this example, the code uses Session variables to store session state from one instance of the page to another. It maintains three Session variables: • DataView: Maintains the data retrieved from SQL Server. Because this is a DataView (basically, a sortable, filterable “wrapper” around a DataSet), you can use this object to sort the data in the DataGrid.

• Sort: Maintains the current sort expression for the data in the DataView.

Working with the DataGrid Control 7-22 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. • SortDirection: Maintains the current sort direction (“ASC” or “DESC”) so that the code can toggle the sort direction if the current sort expression is the same as the requested new one. The code loads a DataSet with data from a table, then stores the DefaultView property of the loaded DataTable into a Session variable—that way, the code needn’t reload the data next time ASP.NET needs to render the page.

In addition, the page tracks the current sorting column and order of the grid so that it can reverse the sort if necessary.

TIP: If you want to sort or filter the data in a DataSet, you must create a DataView object, which “wraps” a DataSet object and provides these functionalities. In this example, we’ll use a DataView to enable sorting in the grid. The DataFill function takes in a sort expression (a column name, usually), creates a DataView containing the loaded data, and stores the DataView in a Session variable. In addition, the code calls the HandleSort procedure, which sorts the data in the DataView.

Private Sub DataFill( _ ByVal SortExpression As String) Dim da As SqlDataAdapter Dim ds As DataSet Dim strSQL As String Dim strCnn As String strSQL = "SELECT ProductID, ProductName _ "UnitPrice, UnitsInStock FROM Products" strCnn = Constants.ConnectionString da = New SqlDataAdapter(strSQL, strCnn) ds = New DataSet() da.Fill(ds, "ProductInfo") Session("DataView _ ds.Tables("ProductInfo").DefaultView() HandleSort(SortExpression) End Sub See DataGrid.aspx.vb

Using Advanced DataGrid Features Web Pages and Web Services Professional Skills Development 7-23 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. TIP: The DataFill procedure uses the SQLConnectionString property of the Constants class to retrieve the correct connection string. Because multiple pages in this project use the same connection information, it makes sense to place this information as a Shared ReadOnly variable in the Constants class. The Shared keyword enables you to use the SQLConnectionString value without ever instantiating a Constants object.

The ReadOnly keyword prevents changing the value from within the application. Why not just make this a constant? Constants can’t use the Shared keyword, so a read-only variable meets the need here.

The HandleSort procedure does the work of determining whether the sort expression has changed since the last time anyone attempted to sort the data. If so, it sorts the data on the new expression, ascending. If not, it reverses the sort on the currently selected sort column: Public Sub HandleSort(ByVal SortExpression As String) Dim strDir As String Dim dv As DataView If SortExpression = String.Empty Then SortExpression = "ProductName" strDir = "ASC" End If

Working with the DataGrid Control 7-24 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. ' Is the current SortExpression the same ' as the last time? If so, alter the ' direction. If SortExpression = CStr(Session("Sort")) Then ' Was it sorted ascending or descending ' last time? Session("SortDirection") will ' tell you.

If CStr(Session("SortDirection " ASC" Then strDir = "DESC" Else strDir = "ASC" End If Else strDir = "ASC" End If dv = CType(Session("DataView"), DataView) dv.Sort = SortExpression & strDir Session("Sort") = SortExpression Session("SortDirection") = strDir End Sub You’ll see how you can call the HandleSort procedure directly later in this chapter. The Page_Load event executes the DataFill procedure to load the data, and then calls the GridLoad procedure to bind the data to the DataGrid: Private Sub Page_Load( _ ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles MyBase.Load 'Put user code to initialize the page here If Not Page.IsPostBack Then DataFill("ProductName") GridLoad() End If End Sub

Using Advanced DataGrid Features Web Pages and Web Services Professional Skills Development 7-25 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Private Sub GridLoad() grdProducts.DataSource = Session("DataView") grdProducts.DataBind() End Sub As you’ve already seen, the GridLoad procedure sets the DataSource property of the DataGrid (this time, the grid is bound to the saved Session variable named DataView, which contains a DataView object). Then it calls the DataBind method of the grid, which causes the DataGrid control to display the data.

Working with the DataGrid Control 7-26 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Adding Advanced Features Earlier in this chapter you learned how to set up the DataGrid and configure columns using the Property Builder. Just as you saw earlier, the grid in this example has four bound columns. In addition, the grid also contains some extra columns with links. How did those get there?

TIP: You can mark columns as read-only, so that later, when you start editing the columns, specific columns can be left out of the edit mode.

In this example, the ProductID field was marked read-only, and the Product Name field, by virtue of its being a hyperlink column, is automatically read-only. Adding Button Columns To add button columns to the DataGrid, click the Columns button in the Property Builder, and expand the Button Column node under Available columns. In this example, we’ve added the Select, Delete, and Edit, Update, Cancel items to the Selected columns list, as shown in Figure 19. Figure 19. Adding Button Column items to the DataGrid.

Adding Advanced Features Web Pages and Web Services Professional Skills Development 7-27 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Later in the chapter you’ll learn how to write the code to make these buttons work. Without code, nothing happens when you click the buttons. Selecting Rows When you add a Select button column and add a format for Selected Items, a SelectedItemStyle element is added to the HTML: When a user clicks the row, the formatting for the selected row changes. Figure 20 shows the SelectedItemStyle in the Property sheet.

Figure 20. Adding formatting for a selected item.

Working with the DataGrid Control 7-28 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. TIP: The Select button is the only button column that doesn’t require any extra code. The link itself causes the grid to change the formatting for the selected row. Adding a Hyperlink Column You can use the Property Builder to add a Hyperlink column. You then specify the following properties: • Text Field: Field to be displayed in the cell. • URL Field: Field to be included as part of the URL.

• URL Format String: Content of the link, perhaps specifying a placeholder for the field specified in the URL Field property. To add a Hyperlink column, move Hyperlink Column from Available columns to Selected columns, as shown in Figure 21. ProductName will be the display value, and the hyperlink will load ProductDetail.aspx for the selected product. In this case: • Text field contains ProductName (the field to be displayed in the grid). • URL field contains ProductID (the field that will be included as part of the URL).

• URL format string contains the name of the page to be opened, including a placeholder for the value in the URL field. In this example, the ProductDetail.aspx page will be opened based on the ProductID parameter. Using {0} for the parameter in the URL format string will substitute the selected ProductID at run time and open ProductDetail.aspx with only the selected product details displayed.

Adding Advanced Features Web Pages and Web Services Professional Skills Development 7-29 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. Figure 21. Adding a Hyperlink Column for the ProductName column. What happens when you click on a link in the grid? When you do that, you’ll navigate to ProductDetail.aspx, as specified in your URL format string (see Figure 21). In addition, the grid will append a parameter that includes the ID you’ve selected. For example, if you’ve selected item 12, the URL looks like this: ProductDetail.aspx?ID=12 That’s what the replaceable parameter in the URL format string does for you. What happens, then, in ProductDetail.aspx? There, code called from the Page_Load procedure retrieves the parameter, using the Request.QueryString property: strSQL = "SELECT ProductID, ProductName _ "UnitPrice, UnitsInStock, UnitsOnOrder _ "ReorderLevel, Discontinued FROM Products _ "WHERE ProductID & Request.QueryString("ID") Then, once the page has built the appropriate SQL string, it fills a DataReader object with the correct set of data and displays that data on the page.

Here’s the whole DataFill procedure, called from the Page_Load event handler:

Working with the DataGrid Control 7-30 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Private Sub DataFill() Dim cmd As SqlCommand Dim strSQL As String Dim strCnn As String Dim cnn As SqlConnection strSQL = "SELECT ProductID, ProductName _ "UnitPrice, UnitsInStock, UnitsOnOrder _ "ReorderLevel, Discontinued FROM Products _ "WHERE ProductID & Request.QueryString("ID") strCnn = Constants.ConnectionString cnn = New SqlConnection(strCnn) cmd = New SqlCommand(strSQL, cnn) cnn.Open() dr = cmd.ExecuteReader( _ CommandBehavior.SingleRow Or _ CommandBehavior.CloseConnection) ' There should only be one row, right?! ' But if there isn't a row, this loop will drop out ' immediately.

Do While dr.Read() Me.txtProductID.Text = dr("ProductID").ToString Me.txtProductName.Text = dr("ProductName").ToString Me.txtReorderLevel.Text = dr("ReorderLevel").ToString Me.txtUnitPrice.Text = dr("UnitPrice").ToString Me.txtUnitsInStock.Text = dr("UnitsInStock").ToString Me.txtUnitsOnOrder.Text = dr("UnitsOnOrder").ToString Me.chkDiscontinued.Checked = _ CType(dr("Discontinued"), Boolean) Loop dr.Close() dr = Nothing

Adding Advanced Features Web Pages and Web Services Professional Skills Development 7-31 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. cmd.Dispose() cmd = Nothing cnn.Dispose() cnn = Nothing End Sub

Working with the DataGrid Control 7-32 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Optimizing the SqlDataReader The ADO.NET designers thought about how people would be using the product, and the ProductDetail.aspx example shows a need that they obviously considered. This page requires that the data provider return only a single row. A smart provider would optimize for this case if it had that information. To make this possible, you can pass CommandBehavior.SingleRow (a member of the CommandBehavior enumeration, which also includes the CloseConnection value), indicating to the provider that you only need one row.

Although it’s not required, the data provider may take this information into account, providing optimized performance. For more information, see the CommandBehavior online help topic.

Setting Up Paging The first step to setting up paging is to configure it in the Property Builder by clicking the Paging button. Figure 22 shows setting the Allow paging property to True and the Page size property to the number of rows you want displayed in the DataGrid (the default value is 10). The Mode drop-down list provides two choices for navigation buttonsNext, Previous, and Page numbers buttons. (We’ve selected Page numbers, in this example.) In this case, a maximum of ten numeric buttons representing the page numbers will be displayed in the header section of the DataGrid.

Adding Advanced Features Web Pages and Web Services Professional Skills Development 7-33 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. Figure 22. Configuring paging for the DataGrid. In order to react to clicking on a page number (or on a Next/Previous button, if you’ve selected that option), you need to add code to handle the grid’s PageIndexChanged event. In the sample page, you’ll find this code: Private Sub grdProducts_PageIndexChanged( _ ByVal source As Object, _ ByVal e As System.Web.UI.WebControls. _ DataGridPageChangedEventArgs) _ Handles grdProducts.PageIndexChanged grdProducts.CurrentPageIndex = e.NewPageIndex GridLoad() End Sub The DataGridPageChangedEventArgs object passed as the second parameter to the event handler, which provides a NewPageIndex property that you can place into the grid’s CurrentPageIndex property.

Once you’ve done that, you must reload the grid with data, and the selected page will display. Sorting Rows When you configure each column in the Property Builder, you set a SortExpression property for each column. When the AllowSorting property is set to True, you’ll see a link associated with each column heading in the grid. If a user clicks on one of those links, the grid raises its SortCommand event, and you can write code to react to that event. The DataGridSortCommandEventArgs object sent as the second parameter to the event procedure provides you with the sort expression. It’s up to you to take that expression, sort the underlying data, and rebind the grid.

The HandleSort procedure that you saw earlier takes the sort expression and refills the Session variable containing the sorted DataView object. The GridLoad procedure rebinds the grid to that saved DataView object: Private Sub grdProducts_SortCommand( _ ByVal source As Object, _ ByVal e As System.Web.UI.WebControls. _

Working with the DataGrid Control 7-34 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. DataGridSortCommandEventArgs) _ Handles grdProducts.SortCommand HandleSort(e.SortExpression) GridLoad() End Sub Editing Rows Earlier in this section you saw how to add Edit, Cancel, and Update button columns to the DataGrid. Clicking on the Edit button places the grid in a special mode in which any field that hasn’t been marked as read-only (you control the fields in the Property Builder) is replaced with a text box for editing.

In order for editing to begin, however, you must write code that reacts to the control’s EditCommand event. Essentially, this event gives you a chance to indicate to the grid which row should be edited. Once in this mode, the grid replaces the Edit button with Cancel and Update buttons. At this point, you can enter text into the text boxes, and when you click either the Cancel or Update buttons, the grid raises the associated event (CancelCommand or UpdateCommand). You must write code to react to these events, in order to instruct the underlying data source how to manage the data. In this section, you’ll see how to handle the EditCommand, UpdateCommand, and CancelCommand events of the DataGrid control.

NOTE To keep this section as simple as possible, we don’t discuss writing the data back out to its data source. That is, all changes to data will only modify the in-memory DataSet. If you want to save the cached data back to the original data source, you’ll need to modify the code to use the techniques discussed in the chapters on ADO.NET. Handling the EditCommand Event In this event handler, you must indicate to the grid which row it should edit. To do that, use the ItemIndex property of the Item property of the DataGridCommandEventArgs object that is passed to the event handler. The Item property of this object represents the selected item in the grid—it has many other properties, as you’ll see in later sections, including a Cells collection corresponding to the cells in the row of the table that contains the grid’s data on the page.

Adding Advanced Features Web Pages and Web Services Professional Skills Development 7-35 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. In general, you’ll assign the ItemIndex property of the event parameter to the EditItemIndex property of the grid, indicating which row you want edited. As with every other event, you must rebind the grid once you’re done so that it can display the correct data.

Private Sub grdProducts_EditCommand( _ ByVal source As Object, _ ByVal e As System.Web.UI.WebControls.

_ DataGridCommandEventArgs) _ Handles grdProducts.EditCommand grdProducts.EditItemIndex = e.Item.ItemIndex GridLoad() End Sub Handling the UpdateCommand Event Handling the UpdateCommand event is tricky. Here, you must find the correct row in the underlying DataSet, retrieve the data from the grid, modify the data in the DataSet, and then save the data. (Remember, you’re not saving the data back to the original data source—you’re simply writing it back to the DataSet. If you want to write it back to the SQL Server database, that will take a little extra effort.) The UpdateCommand event handler (grdProducts_UpdateCommand) is somewhat complex, and takes these actions: • Declares the necessary variables for the rest of the procedure: Private Sub grdProducts_UpdateCommand( _ ByVal source As Object, _ ByVal e As _ System.Web.UI.WebControls.DataGridCommandEventArgs) _ Handles grdProducts.UpdateCommand ' Write ADO.NET code to update the data here.

Dim unitPrice As Decimal Dim unitsInStock As Decimal Dim dv As DataView Dim txt As TextBox

Working with the DataGrid Control 7-36 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. • Retrieves the text of the modified fields. To do this, the code uses the Cells property of the Item passed as a property of the second parameter to the event procedure. The Item represents a row of the grid, which is itself a standard HTML Table row. ASP.NET wraps an object model around the row, providing a Cells collection in which each item represents one column within the row.

Each Cell object contains a collection of Control objects, and because you know that each cell here only contains a single control, you can refer to the particular control you need as Item.Cells(n).Controls(0), where n represents the column of interest.

' WARNING! The column numbers from the ' grid are hard-coded in this procedure. ' If you modify the grid, make sure you modify ' this procedure, as well! ' Retrieve the changed data. txt = CType(e.Item.Cells(4).Controls(0), TextBox) unitPrice = CType(txt.Text, Decimal) txt = CType(e.Item.Cells(5).Controls(0), TextBox) unitsInStock = CType(txt.Text, Decimal) TIP: Option String requires that all type conversions be explicit, and the previous code fragment needed to convert objects of type Control into TextBox objects. To do that, the code uses the CType function to perform the conversion. Then, each fragment needs to convert a text value (from the associated text box) into a Decimal value.

Again, the CType function does the work.

• Retrieves the stored DataView and filters it. The procedure retrieves the Session variable containing the DataView object, and sets its RowFilter property. After filtering the data, there should be at least one row in the DataView. (Actually, there should be exactly one row, but it never hurts to be a little lenient.) ' Retrieve the stored dataview, and filter it. dv = CType(Session("DataView"), DataView) dv.RowFilter = "ProductID & e.Item.Cells(2).Text

Adding Advanced Features Web Pages and Web Services Professional Skills Development 7-37 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. • Edits the row in the DataView. After checking to ensure that there’s at least one row in the DataView, the code uses the 0th row (dv(0)) and performs the edit. If dv.Count > 0 Then With dv(0) .Item("UnitPrice") = unitPrice .Item("UnitsInStock") = unitsInStock End With End If • Releases the filter, clears edit mode, and rebinds the grid. The code sets the RowFilter property of the DataView back to an empty string, effectively removing the filter. Next, it sets the EditItemIndex property of the grid to -1, indicating that no row should be in edit mode. Finally, the code calls the GridLoad procedure once more, forcing a reload and rebind of the data in the grid.

' Note that we're not saving changes back to the real ' data. You learn how to do that later. dv.RowFilter = String.Empty grdProducts.EditItemIndex = -1 GridLoad() End Sub Here’s the entire procedure, in one place: Private Sub grdProducts_UpdateCommand( _ ByVal source As Object, _ ByVal e As _ System.Web.UI.WebControls.DataGridCommandEventArgs) _ Handles grdProducts.UpdateCommand ' Write ADO.NET code to update the data here. Dim unitPrice As Decimal Dim unitsInStock As Decimal Dim dv As DataView Dim txt As TextBox

Working with the DataGrid Control 7-38 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. ' WARNING! The column numbers from the ' grid are hard-coded in this procedure. ' If you modify the grid, make sure you modify ' this procedure, as well! ' Retrieve the changed data. txt = CType(e.Item.Cells(4).Controls(0), TextBox) unitPrice = CType(txt.Text, Decimal) txt = CType(e.Item.Cells(5).Controls(0), TextBox) unitsInStock = CType(txt.Text, Decimal) ' Retrieve the stored dataview, and filter it. dv = CType(Session("DataView"), DataView) dv.RowFilter = "ProductID & e.Item.Cells(2).Text If dv.Count > 0 Then With dv(0) .Item("UnitPrice") = unitPrice .Item("UnitsInStock") = unitsInStock End With End If ' Note that we're not saving changes back to the real ' data.

You learn how to do that later.

dv.RowFilter = String.Empty grdProducts.EditItemIndex = -1 GridLoad() End Sub Handling the CancelCommand Event The CancelCommand event is easy to handle: all you have to do is indicate that no row is in edit mode, then reload the grid. The DataGrid.aspx sample page uses this code to do the job:

Adding Advanced Features Web Pages and Web Services Professional Skills Development 7-39 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Private Sub grdProducts_CancelCommand( _ ByVal source As Object, _ ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _ Handles grdProducts.CancelCommand grdProducts.EditItemIndex = -1 GridLoad() End Sub Handling the DeleteCommand Event When you click the Delete button on a DataGrid row, you trigger the control’s DeleteCommand event.

The code the example uses here is very similar to the EditCommand event procedure, but simpler. In this case, there’s no need to find the data to be saved—the code simply filters for the one row to be deleted and does the work.

TIP: As you read this code, remember that we’ve hard-coded the index of the particular cell containing the ProductID value to be deleted. If you don’t want to do this, you can use the FindControl method of the Item object instead, supplying the ID of the control you need to find. That seemed like overkill for this example, but it’s worth investigating if you don’t care to hard-code the indexes, as we’ve done here. The DeleteCommand event handler looks like this, with the important code marked in bold: Private Sub grdProducts_DeleteCommand( _ ByVal source As Object, _ ByVal e As System.Web.UI.WebControls.

_ DataGridCommandEventArgs) _ Handles grdProducts.DeleteCommand ' Retrieve the stored dataview, and filter it. Dim dv As DataView dv = CType(Session("DataView"), DataView) dv.RowFilter = "ProductID & e.Item.Cells(3).Text

Working with the DataGrid Control 7-40 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. If dv.Count > 0 Then dv(0).Delete() End If dv.RowFilter = String.Empty grdProducts.EditItemIndex = -1 GridLoad() End Sub

Adding Advanced Features Web Pages and Web Services Professional Skills Development 7-41 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. Summary • The DataGrid control allows you to display data in a grid layout. • Unlike the Repeater and DataList, the DataGrid does not require a template, although they are supported. • You can configure SQL Server data access by using a SqlConnection control, a SqlDataAdapter control, and a DataSet control. Or, you can write all the code yourself.

• You can use AutoFormat to quickly apply formatting to the DataGrid. • The Property Builder allows you to set properties for the control in general, for individual columns and sections, for paging, and for borders. • The Property Builder also allows you to add button columns to the DataGrid for use when editing data. • Data displayed in a Hyperlink column can be configured so that clicking on the item loads a related page. • Paging can be configured in the Property Builder with either a page number to jump to a page of data or a set of Next-Previous buttons to navigate to the next or previous pages.

• Setting a Sort Expression for a column in the property builder allows you to write code in the SortCommand event to sort the data and reload the grid. • The Item.ItemIndex property is used to locate a row of data in order to edit it.

Working with the DataGrid Control 7-42 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. (Review questions and answers on the following pages.)

Adding Advanced Features Web Pages and Web Services Professional Skills Development 7-43 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. Questions 1. Does the DataGrid support snaking column layout? 2. Which tool allows you to configure paging and sorting for the DataGrid? 3. What are the two ways to configure navigation when paging in the DataGrid? 4. What do you need to set on a column in the Property Builder to enable sorting in a DataGrid?

Working with the DataGrid Control 7-44 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Answers 1. Does the DataGrid support snaking column layout? No, it only supports a tabular layout. 2. Which tool allows you to configure paging and sorting for the DataGrid? The Property Builder 3. What are the two ways to configure navigation when paging in the DataGrid?

By displaying a page number, or by displaying Next-Previous buttons. 4. What do you need to set on a column in the Property Builder to enable sorting in a DataGrid? A SortExpression

Adding Advanced Features Web Pages and Web Services Professional Skills Development 7-45 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Lab 7: Working with the DataGrid Control TIP: Because this lab includes code that you must type in, we’ve tried to make it simpler for you. You’ll find all the code in DataGrid.txt in the same directory as the sample project. To avoid typing the code, you can copy/paste it from the text file instead.

Lab 7: Working with the DataGrid Control 7-46 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. Lab 7 Overview In this lab, you’ll fill a DataGrid control with information about the Categories available in the Northwind sample database. Although you could write all the code yourself, creating the various ADO.NET objects, in this lab you’ll use the user-interface tools for creating Connection and DataAdapter objects. You’ll also format the grid, using the AutoFormat feature and the Property Builder dialog box. Finally, you’ll add paging and hyperlinks to the DataGrid control. To complete this lab, you’ll need to work through three exercises: • Display Data in a DataGrid Control • Format the DataGrid Control • Add Hyperlinks and Paging Each exercise includes an “Objective” section that describes the purpose of the exercise.

You are encouraged to try to complete the exercise from the information given in the Objective section. If you require more information to complete the exercise, the Objective section is followed by detailed step-by- step instructions.

Display Data in a DataGrid Control Web Pages and Web Services Professional Skills Development 7-47 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Display Data in a DataGrid Control Objective A DataGrid control generally requires a data source in order to display useful information. You can either write all the code yourself, or you can allow the tools provided by Visual Studio .NET to do some of that work for you. In this exercise, create SqlConnection, SqlDataAdapter, and DataSet objects using the Visual Studio .NET data tools.

Retrieve CategoryId, CategoryName, and Description fields from the Categories table within the SQL Server sample database, Northwind. Then, write the code that fills the DataSet and loads the data into the grid as the page loads.

Things to Consider • You’ll only want to run the code that loads the grid the first time the page loads, so check for the value of the Page.IsPostback property in your code. • You must both fill the DataSet, and call the DataBind method of the DataGrid control, in order to display the data. Step-by-Step Instructions 1. Open the DataGridLab.sln project in Visual Studio .NET. 2. In the Solution Explorer window, double-click on the WebForm1.aspx page to load the page in the Designer window. 3. Use the View|Toolbox menu item to ensure that the Toolbox window is visible, and choose the Data tab on the Toolbox.

4. Double-click on the SqlConnection icon in the Toolbox to add an object named SqlConnection1 to the page designer’s tray area. 5. Select the SqlConnection1 object. In the Properties window, find the ConnectionString property, click in the drop-down arrow to the right of the property, and select from the drop-down list. 6. Supply values in the Data Link Properties dialog box, as shown in Figure 23.

Lab 7: Working with the DataGrid Control 7-48 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. NOTE This lab, as all the others, assumes that you have a local installation of SQL Server 2000 or higher, and that you can log in as sa with a blank password. If that isn’t the case, you’ll need to adjust the values in this dialog box accordingly.

Figure 23. The completed Data Link Properties dialog box should look like this. 7. In the Toolbox window, double-click on the SqlDataAdapter icon to add an object named SqlDataAdapter1 to the page’s tray area. 8. Right-click on SqlDataAdapter1 and select Configure Data Adapter from the context menu. This brings up the Data Adapter Configuration Wizard. Click Next to bypass the Welcome page of the Wizard. 9. On the Choose Your Data Connection page, select the default connection (the one you just added), and click Next.

10. On the Choose a Query Type page, accept the default Use SQL statements option, and click Next.

Display Data in a DataGrid Control Web Pages and Web Services Professional Skills Development 7-49 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. 11. On the Generate SQL Statements page, click Advanced Options. Deselect the Generate Insert, Update and Delete option (this deselects the other options on the page, as well). Click OK to close the page. TIP: The previous step isn’t required, but it does remove extraneous code from the DataSet class that isn’t required here.

12. In the What data should the data adapter load into the dataset text box, enter this SQL expression, then click Next: SELECT CategoryID, CategoryName, Description FROM Categories ORDER BY CategoryName TIP: You may find it instructive to use the Query Builder to build the same SQL string.

Click the Query Builder button to try it out. 13. On the View Wizard Results page, click Finish to complete the Wizard. 14. Now that you’ve got the SqlDataAdapter object built, create the DataSet object based on the data you’ve selected. To do this, right-click on SqlDataAdapter1, and select Generate Dataset from the context menu. Accept all the defaults, and create a DataSet object named DataSet11 in the page’s tray area.

15. On WebForm1.aspx, select the DataGrid control. Set properties for the control as shown in Table 1. Property Value DataSource DataSet11 DataMember Categories DataKeyField CategoryID Table 1. Use these properties for the DataGrid control. 16. Double-click on the page (not on the DataGrid control), and modify the Page_Load procedure so that it looks like this (the line-continuation in the procedure declaration allows us to print the code here, and isn’t required in your own procedures):

Lab 7: Working with the DataGrid Control 7-50 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. Private Sub Page_Load( _ ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles MyBase.Load 'Put user code to initialize the page here If Not Page.IsPostBack Then FillData() End If End Sub 17. Add the following procedure to the class: Private Sub FillData() SqlDataAdapter1.Fill(DataSet11) DataGrid1.DataBind() End Sub 18. Select WebForm1.aspx in the Solution Explorer window, right-click, and choose Build and Browse from the context menu. Your page should appear in the Browse window, and should look like Figure 24. Figure 24. The finished page should look like this.

19. Close the Browse window, and save your project.

Format the DataGrid Control Web Pages and Web Services Professional Skills Development 7-51 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Format the DataGrid Control Objective In this exercise, use the tools provided by Visual Studio .NET to format the DataGrid control you filled with data in the previous exercise. In particular: • Use the Auto Format dialog box to select a format for the entire grid (select the Professional 1 style, or any other of your choosing). • Make field headers more readable by inserting spaces between words (“Category ID” rather than “CategoryID”, for example).

• Make the members of the Category Name field appear in bold. • Add blue border lines, both horizontal and vertical. When you’re done, the DataGrid control should look like Figure 25. Figure 25. The finished DataGrid control.

Step-by-Step Instructions 1. In the Solution Explorer window, select WebForm1.aspx. Double-click on the page to load it in the Page Designer window. 2. Right-click on the DataGrid control. Select Auto Format from the context menu.

Lab 7: Working with the DataGrid Control 7-52 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. 3. Set up automatic formatting: From the list of schemes, select one that you find appealing.

If you can’t decide, select Professional 1. Click OK when you’re done, and note that the grid has been updated to reflect your selection. 4. In order to add more specific formatting to the DataGrid control, you’ll need to use the “less blunt” tool—the Property Builder dialog box provides that tool. Right-click on the DataGrid control, and select Property Builder to display the DataGrid1 Properties dialog box.

5. In the DataGrid1 Properties dialog box, select the Columns tab, on the left. Currently, Create columns automatically at run time is selected. You can’t format columns individually with this item selected, so deselect it. 6. In the Available columns list, select (All Fields), then click > to move the selected item to the Selected columns list. 7. Make the headers more readable: In the Selected columns list, select CategoryID, and set its Header text property to Category ID (inserting a space). Repeat for the CategoryName field—this simply makes the grid display more “human readable.” 8. Make the Category Name appear in bold: Select the Format tab on the left.

Drill down into the Objects tree until you find the Items node for the Category Name field, as shown in Figure 26.

9. Add blue grid lines: Select the Borders tab. Set the properties as shown in Table 2. Property Value Grid lines Both Border Color Blue Border Width 2 px Table 2. Set the Border properties like this. 10. Build and browse your page: It should look like the page shown in Figure 25. When you’re done, save the project.

Format the DataGrid Control Web Pages and Web Services Professional Skills Development 7-53 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Figure 26.

The DataGrid1 Properties dialog box allows you to set individual column properties.

Lab 7: Working with the DataGrid Control 7-54 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Add Hyperlinks and Paging Objective In this exercise, modify the grid to add a link to Products.aspx, passing the selected CategoryID value as a parameter. Your hyperlink value should look like this once the page is rendered: Products.aspx?CategoryID=1 In addition, add support for paging through the categories, three rows at a time. Add Next and Previous links, to move through the data.

Things to Consider • It’s not enough to add support for paging in the DataGrid control’s properties. You must also add a little bit of code. • To support paging, you must both set the DataGrid control’s CurrentPageIndex property, and you must rebind the grid to its data source. Step-by-Step Instructions 1. Open WebForm1.aspx in Design view. 2. Right-click on the DataGrid control, and select Property Builder from the context menu. 3. Select the Columns tab on the DataGrid1 Properties dialog box. 4. Scroll the Available columns list to the bottom, and select the HyperLink Column option. Click > to move this item to the Selected columns list.

5. Use the uparrow button to the right of the Selected columns list to move the new HyperLink column so that it’s above the Description item in the list.

6. Select the CategoryName field in the Selected columns list, and click the x button to delete the field. 7. Set properties in the dialog box so that the results look like Figure 27.

Add Hyperlinks and Paging Web Pages and Web Services Professional Skills Development 7-55 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Figure 27. Set properties for the new HyperLink column. TIP: The sample project already includes the Products.aspx page, with code that loads the page’s DataGrid control, given the CategoryID value in the QueryString property.

If you’re interested, load that page and see how it fills its own grid.

8. Build and browse the WebForm1.aspx page. Verify that if you click on any category link, you navigate to the Products page, with only the items in the selected category visible. 9. Close all Browse windows, and save your project. 10. Load WebForm1.aspx in the page designer. Right-click on the DataGrid control, and select Property Builder from the context menu. 11. Select the Paging tab in the DataGrid1 Properties dialog box. 12. Set properties as shown in Figure 28. Click OK when you’re done.

Lab 7: Working with the DataGrid Control 7-56 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved.

Reproduction is strictly prohibited. NOTE Yes, it’s true. There aren’t enough rows in this grid to require paging. We’ve chosen to show three rows at a time, just to demonstrate the technique. TIP: The default values for the Next and Previous page button text values are “>” and “ and

Add Hyperlinks and Paging Web Pages and Web Services Professional Skills Development 7-57 Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited. Private Sub DataGrid1_PageIndexChanged( _ ByVal source As Object, _ ByVal e As System.Web.UI.WebControls. _ DataGridPageChangedEventArgs) _ Handles DataGrid1.PageIndexChanged DataGrid1.CurrentPageIndex = e.NewPageIndex FillData() End Sub 16. Build and browse WebForm1.aspx. Verify that you can page through the data by clicking on the Next and Previous links.

17.

Close the Browse window, and save your project.

Lab 7: Working with the DataGrid Control 7-58 Web Pages and Web Services Professional Skills Development Copyright © by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited.

You can also read