Using GridView to Save and Retrieve Data with AJAX - Modifying the Grid Based on Events

Suppose you would like you to modify the grid so the contents of the Name column are red when the MakeFlag column is checked, that is, when its value is True. In addition, you want all the ProductNumbers that begin with the letters CA to display in green. You can do this by handling the RowDataBound event. As the GridView is populated with data, each row of data is bound to the GridView individually, and the RowDataBound event is fired once for each row.

The second argument to this method is of type GridViewRowEventArgs. This object has useful information about the row that is databound, which is accessible through the Row property of the event argument.

Figure 4-21.  If you view the table in the database after editing it in the GridView, you’ll see that the
changes have been saved.

Enter the code shown in Example 4-3.

Example 4-3. Handling theRowDataBound event

Protected Sub GridView1_RowDataBound(ByVal sender As Object, _
              ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
  If e.Row.RowType = DataControlRowType.DataRow Then
      Dim cellProductNumber As TableCell = e.Row.Cells(3) ' ProductNumber column
      If cellProductNumber.Text.Substring(0, 2) = "CA" Then
          cellProductNumber.ForeColor = Drawing.Color.Green
      End If 

      Dim cellMakeFlag As TableCell = e.Row.Cells(4) ' MakeFlag colum
      Dim cb As CheckBox = CType(cellMakeFlag.Controls(0), CheckBox)
      If cb.Checked Then
          e.Row.Cells(2).ForeColor = Drawing.Color.Red
      End If
  End If
End Sub

The first If statement (highlighted in Example 4-3) tests if the type of Row passed in as a parameter—in other words, the row that was bound and triggered this event—is a DataRow (rather than a header, footer, or something else).

—VB CHEAT SHEET—
If-Then Statements

When you’re working with data, you usually don’t know what the data will be when you’re writing your code. You might want to take different actions depending on the value of a variable. That’s what the If-Then statement is for. You’ve seen how the Checked value of a checkbox or radio button can affect the behavior of other controls. With the If-Then statement, you can be even more flexible:

  If chkMyCheckBox.Checked = true Then
    txtMyTextBox.Text = "It's true!"
  End If

The condition you want to evaluate comes after the If, but before the Then. In this case, you want to determine if the checkbox is checked, so the condition is chkMyCheckBox.Checked = true .

If it’s true, the statement after the Then is executed, setting txtMyTextBox.Text to “It’s true!” You can execute any number of statements in the Then section.

If the condition is false, nothing happens.

You must insert the statement End If at the end of the Then block so that your code knows where the Then block ends and can continue executing as normal from that point.

The Else statement comes into play when you want to take one of two actions. With just an If-Then statement, if the condition you’re evaluating is false, nothing happens. However, you might want to take one action if the condition is true, and another if it’s false, like this:

  If chkMyCheckBox.Checked = true Then
    txtMyTextBox.Text = "It's true!"
  Else
    txtMyTextBox.Text = "Not true!"
  End If

This code sends one message to txtMyTextBox if the condition is true, and a different message if it’s false.

You have lots of different options when you specify conditions, which are based on a set of “operators” that you’re probably already familiar with. For example, instead of testing to see if one part of your condition is equal (=) to another, you could use one of these other operators:

1. <> not equal to
   
2. < less than
   
3. > greater than
   
4. <= less than or equal to
   
5. >= greater than or equal to

In short, you can test for any condition that evaluates to true or false—in other words, a Boolean. In fact, the Checked property of a textbox is a Boolean all by itself, so you could have used this for the condition:

  If chkMyCheckBox.Checked Then

Once you know you are dealing with a DataRow, you can extract the cell(s) you want to examine from that row. Here, we will look at two cells: the ProductNumber cell is the fourth cell in the row, at offset (index) 3, and the MakeFlag cell is the fifth cell in, at offset 4. (Remember, all indices are zero-based.)

To access the ProductNumber cell, you define a new variable, cellProductNumber, defined as a TableCell with the As keyword, and set it equal to the cell at offset 3 in the row, like this:

  Dim cellProductNumber As TableCell = e.Row.Cells(3)

Once you have the cell as a variable, you want to get the text contained in the cell to compare to your known value. You do that by accessing the Text property of cellProductNumber, and then using the Substring() function.

The Substring() function, as you might guess from its name, extracts a smaller string from a larger one. This is a pretty simple function to work with. First, you call the function on a string, and you give it two numbers as parameters: the index of the start of the substring, and the length of the substring. As with all other indices, the first character in the string is position zero. You want the first two characters from the Text string, so the starting index is 0, and the length of the substring is 2. Therefore, to get the first two characters from your string, you use the function Substring(0,2). Once you have that substring, you can use a simple If statement to compare it to the string you want to match, "CA":

  If cellProductNumber.Text.Substring(0, 2) = "CA" Then

If there is a match, you want to set the ForeColor property of the cell to green, which you can do using the Drawing.Color.Green property:

  cellProductNumber.ForeColor = Drawing.Color.Green

In the case of the MakeFlag, it is somewhat more complicated. It’s easy enough to isolate the cell that contains the checkbox—it’s at index 4—and then assign that value to a new variable called cellMakeFlag:

  Dim cellMakeFlag As TableCell = e.Row.Cells(4)

This is the same technique you used to isolate the ProductNumber cell. In this case, though, the Text property of this cell will always be empty. However, it does contain a CheckBox control, which is the only control in the cell. Instead of reading the text in the cell, you want to read the value of the Checked property of that CheckBox control. Each cell has a collection of all the controls contained in the cell, called Controls, which has a zero-based index. Since the checkbox you want is the only control in the collection, you know it’s at cellMakeFlag.Controls(0). Next you define a new variable, cb, which you define as a CheckBox. Then you use the CType function on the control you just isolated, to convert the control to a CheckBox. This works because we know it is a CheckBox:

  Dim cb As CheckBox = CType(cellMakeFlag.Controls(0), CheckBox)

—VB CHEAT SHEET—
CType Method

CType converts its first argument into an object of a new type as specified by its second argument. In the case shown here, it is converting a control to a CheckBox. If the object you pass is not of the appropriate type, CType generates an error. Read this statement:

  Dim cb As CheckBox = CType(cellMakeFlag.Controls(0), CheckBox)

as follows: “Find the first item in the Controls collection in cellMakeFlag and convert it to type CheckBox.” The result will be an object of type CheckBox or an exception will be thrown. If no exception is thrown, assign the result to the variable cb, which is of type CheckBox.

If you want to be extra careful, you can wrap the CType conversion in a try/catch block, discussed in Chapter 8, but that isn’t really necessary here as you know it is a checkbox.

Then you test the Checked property of the CheckBox:

  If cb.Checked Then

If the box is checked, cb.Checked will evaluate to true. If it is checked, you want to set the ForeColor property of the third cell in the row (offset 2), the ProductName column:

  e.Row.Cells(2).ForeColor = Drawing.Color.Red

You set the color of the cell the same way you did for ProductNumber, but notice this time you’re not changing the color of the checkbox cell itself—you’re changing a different cell in the table.

Run the web site. It will look identical to Figure 4-19, except the product names for which the MakeFlag field is checked will display in red, and some of the product numbers will display in green. (Neither of these changes will be obvious in the printed book, so we will forego a figure showing the color changes.)

Next: Selecting Data from the GridView >>
 

More ASP.NET Articles
More By O'Reilly Media

Comments On: Using GridView to Save and Retrieve Data with AJAX

· This article is an excerpt from the book "Learning ASP.NET 2.0 with AJAX: A...   >>> Post your comment now!

Buy this book...

This article is excerpted from chapter four of Learning ASP.NET 2.0 with AJAX: A Practical Hands-on Guide, written by Jesse Liberty, Dan Hurwitz and Brian MacDonald (O'Reilly, 2007; ISBN: 0596513976). Check it out today at your favorite bookstore. Buy this book now.