An Extensive Examination of the DataGrid Web Control: Part 11By Scott Mitchell
|The Eleventh Part in a Multi-Part Series|
This article is the eleventh piece of a multi-part series on using the DataGrid Web control that will span
several months. The ASP.NET DataGrid Web control, which displays database information in an HTML table, is
highly versatile. The basics of the DataGrid were discussed in Part 1;
information on specifying display properties of the DataGrid was discussed in
Part 2. In Part 3
we examined how to associate custom events with the DataGrid.
In Part 4 we looked at how to extend
Part 3 to provide custom sorting on the results of a DataGrid. In
Part 5 we examined how to use templates to further customize
the DataGrid's appearance. Part 6 examined how to use the
DataGrid's built-in editing capabilities, while Part 7 looked at
customizing the editing interface using the EditItemTemplate. In Part 8
we looked at how to add client-side code to a ButtonColumn's client-side |
There are many real-world situations in which you might like to create a DataGrid that has a column of radio buttons that serve to allow the user to select a particular row. For example, if you wanted to create some sort of online voting application, you might want to use a DataGrid to display the voting options with a radio button next to each option, so that the user can choose one and only one option.
Many developers who want to add this sort of functionality think that it is a trivial task, involving merely the addition of a TemplateColumn whose ItemTemplate has a RadioButton Web control. As we will see in this article, the task is not nearly this simple. Specifically, we will look at why using a TemplateColumn with a RadioButton Web control won't cut the mustard, and then we'll examine a free custom DataGrid Column control from Andy Smith's MetaBuilders.com Web site, which easily allows for adding a column of radio buttons to a DataGrid.
Why the TemplateColumn Approach Won't Work
The intuitive way to provide a radio button column in a DataGrid is to use a TemplateColumn where the ItemTemplate has a RadioButton control. (We examined the TemplateColumn in Part 5.) This could be accomplished using the following DataGrid markup:
The above code will create a column that has a radio button in each row, yes, but due to the way that the DataGrid names its containing controls, the user will be able to select multiple radio buttons. (Don't believe me? Try it out in the live demo.) Clearly, being able to select multiple radio buttons breaks the semantics of the radio button metaphor.
When the Web browser is confronted with a series of radio buttons, it considers radio buttons with the
name attribute to be of the same group of radio buttons. That is, if you have a
number of radio buttons on a Web page with the same
name attribute, the user will only
be allowed to select one of those same named radio buttons.
The ASP.NET RadioButton Web control provides a
GroupName property, that specifically sets the resulting radio button's HTML markup to have
name attribute specified by this property. Therefore, if you need to plop down a related
series of RadioButton Web controls, you can simply give all of the RadioButton Web controls the same
GroupName property value, which will result in radio button HTML markup where each radio
button has the same
name attribute, which will result in the user only being able to select
one of the related radio buttons.
However, as you can see in the DataGrid example I provided, even though the
the same for all RadioButton Web controls in the column, the user can still select more than one distinct
radio button. To see why this is, let's take a look at the HTML markup produced by the ASP.NET Web
page when the above DataGrid example is used (you can take my word that the below HTML is the HTML markup
produced, or you can visit the live demo and do a View/Source):
The above HTML markup has been shortened considerable for brevity, and is only showing a small subset
of the resulting HTML table rows produced by the DataGrid. However, the important part is still
noticeable from this sample, and that is that the
name property of each of the radio buttons
is unique, even though we set the
GroupName property to the same value (
This is because the DataGrid is being built up row-by-row it prepends the rows
GroupName property, using a colon as a delimiter. Then, it prepends the DataGrid's
ID property, and this is what the radio button's
name attribute is assigned.
As you can see, the
name for the first FAQ is:
which, more generally, is:
DataGrid ID:DataGridItem ID:GroupName.
Ensuring that Each Radio Button's
name Attribute is Identical
So how can we make sure that each radio button's
nameattribute is assigned the same value when the DataGrid prepends the DataGridItem and DataGrid
IDproperties to the
nameattribute? The only way that I have found to accomplish this is to use a custom DataGrid column class from which you can explicitly override the naming of the
nameattribute. (If you know of an easier way, please do let me know.)
|What is a Custom DataGrid Column Class?|
|The DataGrid has a number of built-in columns, many of which we have examined throughout this article series. Some of these include the BoundColumn, the TemplateColumn, and the ButtonColumn. A custom DataGrid column class is one that you create yourself. They're fairly easy to create, especially if you have a development tool like Visual Studio .NET (although this isn't a requirement). For more information on creating your own custom DataGrid column class, be sure to read John Dyer's Creating a Custom DataGridColumn Class.|
Rather than writing our own custom DataGrid column class to perform this renaming, let's use one that is already written, is 100% free, and includes complete source code. I am talking about Andy Smith's excellent RowSelectorColumn control, which you can try out and download from http://metabuilders.com/Tools/RowSelectorColumn.aspx.
Once you download the control, copy the control (the DLL file in the
of the downloaded ZIP file) to your Web application's
/bin directory. Then, you can
use Andy's control by simply adding:
<%@ Register TagPrefix="prefix" Namespace="MetaBuilders.WebControls" Assembly="MetaBuilders.WebControls.RowSelectorColumn" %>
to the top of your ASP.NET Web pages that use the control.
Let's now turn our attention to using the RowSelectorColumn in an ASP.NET Web page! We'll look at creating a column of radio buttons, as well as a column of checkboxes, using the RowSelectorColumn in Part 2!