Working with the DataGrid Control - Objectives

 
Working with the DataGrid Control

      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.

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

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.

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.
Setting Up the DataGrid

  Setting Up the DataGrid
See the DataGrid       In order to demonstrate the simplicity and power of the DataGrid control, this
solution for the       section will walk you through adding an instance of the control to a new
completed example      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

  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.
Working with the DataGrid Control

                      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.

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.
Setting Up the DataGrid

                          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.

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.
Working with the DataGrid Control

                 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

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.
Setting Up the DataGrid

                      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.

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.
Working with the DataGrid Control

                 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.

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.
Setting Up the DataGrid

                      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

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.
Working with the DataGrid Control

                 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.

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.
Setting Up the DataGrid

                      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.”

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.
Working with the DataGrid Control

                      Figure 9. Setting column display properties.

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.
Setting Up the DataGrid

                      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.

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.
Working with the DataGrid Control

                 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.

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.
Setting Up the DataGrid

                      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.

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.
Working with the DataGrid Control

                    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

See Webform1.aspx 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:

  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.
Setting Up the DataGrid

                       Display the DataGrid in Browser View

See                   Although you’ve been able to get this far without writing any code at all, you’ll
Webform1.aspx.vb      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.

 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.
Working with the DataGrid Control

                 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.

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.
Using Advanced DataGrid Features

 Using Advanced DataGrid Features
See the               The DataGrid control has many more built-in features than the simple ones
DataGridComplete      you’ve seen so far. The DataGrid control provides many rich server-side
solution              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.

 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.
Working with the DataGrid Control

                 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.

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.
Using Advanced DataGrid Features

                      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.

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.
Working with the DataGrid Control

                         •    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.

See                 The DataFill function takes in a sort expression (a column name, usually),
DataGrid.aspx.vb    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

  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.
Using Advanced DataGrid Features

                      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

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.
Working with the DataGrid Control

                    ' 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

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.
Using Advanced DataGrid Features

                      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.

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.
Working with the DataGrid Control

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.

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

                      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.

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.
Working with the DataGrid Control

                 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.

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.
Adding Advanced Features

                          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:

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.
Working with the DataGrid Control

                 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

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.
Adding Advanced Features

                        cmd.Dispose()
                        cmd = Nothing

                        cnn.Dispose()
                        cnn = Nothing
                      End Sub

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.
Working with the DataGrid Control

                                           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.

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.
Adding Advanced Features

                          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. _

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.
Working with the DataGrid Control

                  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.

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.
Adding Advanced Features

                      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

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.
Working with the DataGrid Control

                      •     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

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.
Adding Advanced Features

                          •     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

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.
Working with the DataGrid Control

                       ' 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:

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.
Adding Advanced Features

                      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

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.
Working with the DataGrid Control

                    If dv.Count > 0 Then
                       dv(0).Delete()
                    End If
                    dv.RowFilter = String.Empty
                    grdProducts.EditItemIndex = -1
                    GridLoad()
                 End Sub

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.
Adding Advanced Features

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.

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.
Working with the DataGrid Control

                 (Review questions and answers on the following pages.)

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.
Adding Advanced Features

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?

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.
Working with the DataGrid Control

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

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.
Adding Advanced Features

           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.

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

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.

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.
Display Data in a DataGrid Control

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.

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.
Lab 7:
Working with the DataGrid Control
                 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.

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.
You can also read
NEXT SLIDES ... Cancel