The Big ASP.NET DataGrid Article, Part 2

Selecting Multiple Web Form Grid Items, Hotmail-Style

Selecting and, say, deleting items one by one can be a real pain. E-mail services such as Hotmail and Yahoo! Mail recognize that and allow you to select multiple messages through a little checkbox, then zap them all at once. Well, anything Hotmail can do, we can do... and quicker.

To create a selection checkbox, first set up your Web DataGrid as normal—displaying anything from order information to mail messages. Next, right-click the DataGrid and select Property Builder. Choose the Columns property sheet and add a "Template Column" to the list of selected columns, moving it to the top of the list (the first column). Set the "Header text" value if you wish. Click OK when finished.

Back on your Web page, right-click on your DataGrid again, this time choosing Edit Template, then selecting your new Template Column. This is your template for this particular field. Drag and drop a CheckBox control into the ItemTemplate portion, changing its ID property to chkSelect. When finished, right-click on the DataGrid again and select End Template Editing. You should be able to see the difference on your DataGrid.

Next, add a button to your Web form. This will be the button your user clicks after selecting records to delete (or perform some other action upon). Add code behind the button Click event, similar to the following:

Dim objItem As DataGridItem
For Each objItem In MyDataGrid.Items
  ' Ignore invalid items
  If objItem.ItemType <> ListItemType.Header And _
     objItem.ItemType <> ListItemType.Footer And _
  objItem.ItemType <> ListItemType.Pager Then
    ' Retrieve the value of the check box
    Dim blnDelete As Boolean
    blnDelete = CType(objItem.Cells(0).FindControl("chkSelect"), _
                      CheckBox).Checked
    If blnDelete = True Then
      ' Delete this row from the underlying DataSet, ie.
      ' LocalDS.Tables(0).Rows(MyDataGrid.SelectedIndex).Delete
      ' You can also retrieve the value of a field on the row, ie.
      ' MyVariable = objItem.Cells(5).Text
      ' ... then rebind.
    End If
  End If
Next

Here, our code walks through each valid item in the DataGrid, searching for our control in the first cell (zero index) and analyzing whether it's checked. If it is, that's where your code can step in to take action—probably deleting the record in the underlying DataSet, then rebinding, as per example code in the "Nine Steps to a Quick, Editable Web Grid" tip.

And that's it. You now should be able to select multiple cells and perform an operation en masse, such as a delete, in seconds! You may even want to merge this tip with the next for even more power over your data.

(Full Size Image)

Figure: Selecting multiple items in our Web grid, Hotmail-style

Click Anywhere and Select, with a Web Grid

Web applications are not like Windows applications. We know that. But, by using tricks such as the SmartNavigation property (covered here some months ago), you can give your sites more intelligence, allowing them to be much more responsive and to work better.

This next tip adds to that repertoire. By using the following code, you can click anywhere in a DataGrid and have the record you were over selected (or, rather, have your code behind the SelectedIndexChanged event run). This is especially useful for those with a speedy Internet connection, or using an intranet site, where postbacks are hardly noticed.

Anyway, here's the code. It assumes the very first column contains a Select button of the PushButton variety (you need to add this and any related code yourself, however; you can make the actual button invisible through the Property Builder, if you wish to do so). Our code finds this Select button and, through the highly hush-hush GetPostBackClientHyperlink function, returns the name of the script that runs when that button is clicked. This script is then set to run whenever the onclick event of your row runs. In other words, when the user clicks anywhere on your row, the Select button script kicks into play!

Ready to go? Just add the following code to respond to the ItemDataBound event of the DataGrid control:

If e.Item.ItemType = ListItemType.Header Or _
  e.Item.ItemType = ListItemType.Footer Or _
  e.Item.ItemType = ListItemType.Pager Then Exit Sub
If e.Item.Cells(0).Controls.Count > 0 Then
  If TypeOf (e.Item.Cells(0).Controls(0)) Is Button Then
    Dim btnSelect As Button = CType(e.Item.Cells(0).Controls(0), _
                                    Button)
    e.Item.Attributes("onclick") = _
      Page.GetPostBackClientHyperlink(btnSelect, "")
  End If
End If

Figure: Click anywhere and select, with this crafty code

About the Author

Karl Moore (MCSD, MVP) is an experience author living in Yorkshire, England. He is author of numerous technology books, including the new Ultimate VB .NET and ASP.NET Code Book, plus regularly features at industry conferences and on BBC radio. Moore also runs his own creative consultancy, White Cliff Computing Ltd. Visit his official Web site at www.karlmoore.com.

Karl Moore (MCSD, MVP) is an experience author living in Yorkshire, England. He is the author of numerous technology books, including the new Ultimate VB .NET and ASP.NET Code Book (ISBN 1-59059-106-2), plus regularly features at industry conferences and on BBC radio. Moore also runs his own creative consultancy, White Cliff Computing Ltd. Visit his official Web site at www.karlmoore.com.