In Lab, You Will Perform the Following Exercises

IS 460
GridView Lab
Ekedahl

This lab requires that you use the database named Gaming.mdf. A copy can be found on the COBA K: drive. Note that this is not the same database that you used in the first assignment. It has a couple of additional tables.

In lab, you will perform the following exercises:

• Create and configure a data source as you did in the previous lab.
• Create and configure a GridView using auto-generated fields.
• Create and configure a GridView using bound fields.
• Enable selection for a GridView.
• Create and configure a GridView using TemplateFields.

Exercise 1 – Creating and Configuring a SqlDataSource

In the previous lab, you used a list box to select records. In this lab, you will use a GridView to select and display a list of records. From the list of records displayed in the GridView control instance, you will display the selected record details in a FormView. Since, in the last lab, you learned how to perform insertions, updates, and deletions, you will not do the same again here. That is, you will only use the FormView to display a current record.

1. Create a new Empty Web site from the template as you have been doing before.
   
2. In that Empty Web site, create a folder named App_Data and copy the database from K:\IS460 to this folder. To create the folder, right click on the project (IS460FormViewLab). In the context menu, click Add, New Folder. Rename the folder to App_Data. The folder name is not case sensitive as Windows file names are not case sensitive.
   
3. Using the Toolbox, create a SqlDataSource control instance on the form. Configure the SqlDataSource to select all of the records from the table named tblProperty. Because the GridView that will be bound to this control will display all of the rows from the table, the SqlDataSource should be configured with only a SELECT statement. No parameters (WHERE clause) is necessary. The declarative code should look like the following:

Exercise 2 - Creating and Configuring a GridView (Method 1Autogenerated Fields)
In this exercise, you will create a GridView control and bind it to the SqlDataSource that you just created. The simplest way to bind the GridView control is to set the DataSourceID property to a SqlDataSource, and set the AutoGenerateColumns attribute to true. In subsequent exercises, you will do more with the GridView control.

1. Create an instance of the GridView control on the form. The GridView control can be found on the Data tab of the Toolbox. When you do, default values appear. These default values exist just to show that it’s a GridView with rows and columns. Click the Arrow to display the popup menu. Select the data source named SqlDataSource1. The GridView should appear as follows at design time:
   
   
2. Activate the Properties window for the control instance. Make sure that the AutoGenerateColumns property is set to true. Setting this property to true causes the columns to be created automatically based on the columns in the underlying data source. As you will see later, column creation can be customized.Note that true is the default value for this property.The following code should be generated for the GridView.
   
   
3. At this point, you have done everything necessary to configure the most simple of GridViewsthat will display all of the rows from a single table. Run the application, the grid should appear as shown in the following figure:
   

As shown in the above figure, the field name appears as the column header. The columns appear in the same order that the columns appear in the database.

Exercise 3 – Customizing GridView fields (Method 2 - BoundControls)

The GridView control is very robust. In the first example, you saw the simplest way of configuring the control to display a grid of data using auto generated columns. In this exercise, you will create a second GridView and bind it to the database fields using BoundFields instead of auto-generated columns.

1. Create a new form named gvBoundControls. Create a SqlDataSource on the form and configure it to select the same data as you did on the first form. That is, select all of the fields from the table named tblProperty
   
2. Create a GridView control instance on the form. Bind the grid to the data source you created on the form using the context menu as before. From the context menu, click Edit Columns… to display the following dialog box:
   

Note that the dialog box contains the following sections:

• The Available fields section list the available field types. These field types are listed and discussed in the following table:
  
• The Selected fields section lists the fields that have been selected for display. Fields are displayed in the order that they are listed.
  
• The Field properties section allows you to set properties for the currently selected field.
  
• Clicking the Refresh schema button (link) reads the schema and sets up the available fields.
  

1. Click the Refresh Schema link in the lower-left part of the form. When you do, the table fields are loaded in to the available fields based on their type. If you expand the BoundField folder, you will see that the table fields appear as follows:
   
   
2. Double-click the Field named fldProperty.The dialog box is updated to display the properties applicable to a BoundField. Change the HeaderText to PropertyID as shown in the following figure:
   
   For brevity, all of the properties will not be discussed here.
   
3. Modify the remaining prompts to display the text Property Name, Address, City, State, and Zip Code. Make sure that these fields appear in the Selected fields section as follows. Make sure that the auto-generate fields check box is not checked. Otherwise, you will end up with duplicate fields.
   
4. If you take a look at the code, you will see the following:
   
   

Examine the code that was generated by the Wizard:

The previous steps show the second technique to work with a bound GridView; explicitly configuring the various columns. Note the following about the preceding code.

• There is an “immediate child” of the GridView control named <Columns>. Each child element of the <Columns> element represents a column that will be displayed in a GridView.
  
• Inside of the <Columns> element, you create various objects representing a column from the table. In the above section, you are using the BoundField object. The DataField object contains the name of the field to which the column will be bound. There are a few other ways to do this as you will see throughout this lab.

Column field type / Description
BoundField / Displays the value of a field in a data source. This is the default column type of the GridView control.
ButtonField / Displays a command button for each item in the GridView control. This enables you to create a column of custom button controls, such as the Add or the Remove button.
CheckBoxField / Displays a check box for each item in the GridView control. This column field type is commonly used to display fields with a Boolean value.
CommandField / Displays predefined command buttons to perform select, edit, or delete operations.
HyperLinkField / Displays the value of a field in a data source as a hyperlink. This column field type enables you to bind a second field to the hyperlink's URL.
ImageField / Displays an image for each item in the GridView control.
TemplateField / Displays user-defined content for each item in the GridView control, according to a specified template. This column field type enables you to create a custom column field.

1. Run the program again. Note that the column headers have been updated. Note that the following figure shows what would happen if you use both BoundFields and autogenerated columns.
   
   

Exercise 4 – Enabling Grid Selection

There are several options to enabling selection:

• Use a CommandField object to use predefined commands. Set the ShowCancelButton, ShowDeleteButton, ShowEditButton, ShowInsertButton, ShowSelectButton attributes to true or false to display or hide the button.
  
• Use a ButtonField object with the CommandName set to select, as follows:
  
  
• The above settings produce the following declarative code:

1. On the form with which you have been working, create a ButtonField as shown above.
   
2. Create the SelectedIndexChanged event for the GridView control. You will code the event handler in subsequent steps.
   
   
3. Run the program. The Select button will appear as follows. Because you have yet to code the event handler, nothing will happen if you click the button.
   

In these next steps, you will create a FormView such that it will display the currently selected record from the GridView. The process is similar to the process shown in the last lab.

• Create a data source that is bound to display a single record.
  
• Bind the FormView to the data source.
  
• Handle the SelectedIndexChanged event for the parent grid so as to bind the SelectParameter.
  
• In the SelectedIndexChanged event handler, set the default select parameters and rebind the data source. Rebinding the FormView will work too, since the FormView is bound to the same data source.
  

1. Create the following data source that will select a single record from the table named tblProperty. Again, you can do this declaratively or using the Wizard.
   
   
2. Create an instance of the FormView control on the form. Configure it to get records from the data source that you just created (SQLDataSource2). Again, you can do this from the popup context menu.
   
3. In the context menu where the data source is selected, click the Refresh Schema link. The Wizard will build the template code to bind the controls.The following dialog box appear requesting that you complete the value of the parameter.
   
   
4. Enter the value 1 for the parameter.
   Note that the Wizard will build the EditItemTemplate and InsertItemTemplate even though they will not work (because the datasource was not fully configured to perform updates). All of the FormView configuration was discussed a couple of weeks ago.
   
5. Make sure the following attribute appears in the declaration for the GridView. Setting this attribute allows the grid to associate the selected row via the SelectedDataKey property. Note that this attribute’s value must contain the primary key field name from the database table. Otherwise, selection and updating will not work correctly.
   DataKeyNames="fldProperty"
   
6. Add the following code to the SelectedIndexChanged handler for the GridView control to rebind the data source, thereby selecting a single record.
   
   The first of the preceding statements contains an assignment statement. On the left side of the assignment statement, you are setting the SelectParameter named “fldProperty”. Note that the field name here must match the parameter name. Otherwise an error will occur. The right side of the assignment statement reads the SelectedDataKey property. This property contains the value of the primary key for the selected record. The final statement rebinds the data source thereby selecting the correct record in the form view.
   
7. Test the application. Select a record in the grid. The corresponding record should be displayed in the FormView. You will not apply any formatting in the lab as you have done that before. Your output should resemble the following:
   
   

Exercise 5 – Enabling Deletion using a Template

In this next exercise, you will enable grid deletion. Again, there are a couple of ways to enable deletion.

• You can use a ButtonFieldand set the CommandName to Delete. Note that the SqlDataSource must be set up with a delete command.
  
• You can use a CommandField and set the ShowDeleteButton to true
  
• You can create TemplateFields.

In this exercise, you will use a button field.

1. Modify the first SqlDataSource (the one bound to the grid) to add a DeleteCommand as follows. Make sure that you define the parameter name exactly as I have done. Otherwise, the control will not be able to figure out the binding.
   
   
2. Create the ButtonField as in the following figure:
   asp:ButtonFieldCommandName="Delete"Text="Delete"/>
   
3. Test the program. Click the Delete button to delete the last row from the table:

Exercise 6 – Using a TemplateField

TemplateFields work similarly for both the GridView and the FormView. For the GridView you can create the following templates. Each TemplateField represents a column. For each TemplateField, you create the following templates.

• The HeaderTemplate appears in the header row. The text or control appearing inside the HeaderTemplate is rendered in the column header.
  
• The ItemTemplate is rendered once for each data row that is rendered. Again, the ItemTemplate can contain a button or any other control instance.
  
• The AlternatingItemTemplate, is used for alternating rows. Personally, I have never used it. Alternating styles are valuable though.
  
• The EditItemTemplate is rendered while the control is in edit mode. It is only rendered for the record that is currently being edited.
  
• The FooterTemplate is rendered for the last row in the grid. It is used, as mentioned in class last time, to insert a record or possible display total rows.

In this exercise, you will replace the delete button field that you just created with a <TemplateField> to see that both work the same way.

1. Remove the following line that that creates a ButtonField configured as a delete button.
   asp:ButtonFieldCommandName="Delete"Text="Delete"/>
   
2. Insert the following statements to create a <TemplateField>.
   
   
3. Run the program. As you can see, the delete button configured with template fields work the same way as Delete buttons.

Exercise XX

In this exercise, you will create a similar interface except that you will use two linked GridView controls. The first will be bound to the table named tblProperty. The second will be bound to the table named tblGamingDeviceInstance.

1. Create a new Web form named LinkedGridView.aspx.
   
2. Create anSqlDataSource control instance on the form and configure it so that it connects to the table named tblProperty. Configure the data source so that it selects all of the rows from the table and the fields named fldPropertyID, fldName and fldAddress. Name the data source sdsProperty. Note that you can use the same connection as you have been using.
   
3. Create a second SqlDataSource control instance on the form and configure it so that it connects to the table named tblGamingDeviceInstance. Select all of the rows from the table having the same property id. Thus, this SELECT statement will look nearly identical to the SELECT statement for the FormView control in the previous exercise. I suggest naming the control instance sdsDeviceInstance. Your configuration should look like the following:
   
   
4. Create a GridView that will connect to the SqlDataSource for the table named tblProperty. Enable a Select button as you did before.
   
5. Create a second GridView that will connect to the second GridView that will connect to the table named tblGamingDeviceInstance.
   
6. Configure the second GridView so that when a record is selected in the first gird, only those records having the same property id will be displayed in the second grid. Your code should look similar to the following:
   
7. Run the program. Select a row in the first grid. The corresponding row should be displayed in the second grid

Configure the GridView to select data from the SqlDataSource that you just created. so that “selection” is enabled. Display only the fields named fldPropertyID, fldName, and fldAddress. Change the column headers so that they are the same as those in the following figure. You can change the headings directly by editing the .aspx file or using the tool.

Exercise 2.

1. 
   
2. 
   

1. as shown in the following figure:
   

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

1. Next, you need to configure the GridView and DetailsView controls such that they are linked together. There are a couple of ways to do this. I suggest handling the SelectedIndexChanged event. Add the event handler to the .aspx file
   
   Modify the above code, changing the name of the GridView control to match the name you chose. My code assumes that the GridView is named gvMain.
   
2. Now, create the event handler itself. I assume that the GridView is named gvMain and the second SqlDataSource is named SqlDataSource2. Change your names accordingly.
   
   The SelectedIndexChanged event fires when the user selects a row in the GridView. The statement fragment gvMain.SelectedDataKey.Value gets the key from the selected row. You specified the field named fldPropertyID for the DataKeyNames property so SelectedDataKey.Value gets the primary key of the selected record. The cast is necessary to convert the value to an integer. Next, the parameter is copied to the data source. Change the name as necessary to match the data source. Finally, the DataBind method is called on the data source. This call is necessary to force the DataSource control to retrieve the data and thereby populate the FormView.
   
3. Test the application. When you select a row in the GridView, the corresponding records should be displayed in the list view. Your screen should look similar to the following. Don’t worry about the formatting: