Full-Row Selection in a DataGrid

The DataGrid control has supported row selection since its debut with ASP.NET 1.0. However, in order to select a row and get a corresponding server-side event you have to add a made-to-measure column to the DataGrid. The column is a normal button column with a special command name—Select.

<asp:ButtonColumn runat=server commandname=select ...><br>:<br></asp:ButtonColumn>

You normally place this column as the first or the last in the grid. The text displayed through the column can be anything you prefer. It can be a constant string like “Details” or “Select” as well as an image. In this case, you just set the Text property of the column with the proper HTML markup code:

< asp:ButtonColumn text="< img src=select.gif>" ...>

Alternately, the column can also be bound to a data-source column.

Why should you select a grid row? Typically, you click on a row to drill down into the information it represents. For example, if the grid lists your customers, you can click to see the details of the specified customer.

The key point is that you need a button column to enable row selection. Any command column is fine, but if you use one with the CommandName property set to “Select,” you get some extra benefits from the DataGrid control. For example, the grid will automatically apply the styles set in the SelectedItemStyle property and fire the SelectedIndexChanged event. Can you ask for more? Actually, many users will, sooner or later.

If you haven’t got it already, be prepared—it can be as soon as tomorrow or next week. If you provide users with a selectable DataGrid, they tend to ask for full-row selection, which is the capability of clicking anywhere in the row and having the page post back as if you clicked on the regular select column.

To implement that, you add a bit of script code to each row that detects clicking and posts back. However, what you need here is not simply a postback. You actually need a postback that brings in the reference to the clicked row. The simplest way to get this is stealing some code from the select column without removing it altogether. In the end, you have a DataGrid with a select column and the additional and unique capability of posting back no matter where you click.

You add an ItemDataBound event handler to your grid, defined as follows

:
LinkButton button;
button = (LinkButton) e.Item.Cells[0].Controls[0];
string js =GetPostBackClientHyperlink(button, "");
e.Item.Attributes["onclick"] = js;

The code above must run only if the item type is Item or AlternatingItem. You first retrieve a reference to the link (or push) button in the Select column. In the snippet above, I'm assuming it is the first control on the first column (this can be anything else in your real code). Next, you retrieve the client script code associated with the postback of the specified control. In other words, the GetPostBackClientHyperlink method returns the same Javascript call that executes when you click on the Select column. You bind this call to the onclick event of the row (the table's tag) and you're done.

If you really don't like having a Select command column, you can always give it a width of 0 or an empty text or a neutral bitmap.

Dino Esposito is Wintellect's ADO.NET and XML expert, and a trainer and consultant based in Rome, Italy. Dino is a contributing editor to Windows Developer Network and MSDN Magazine, and the author of several books for Microsoft Press including Building Web Solutions with ASP.NET and ADO.NET and Applied XML Programming for .NET. Contact Dino at [email protected].