An Extensive Examination of the DataGrid Web Control: Part 11
By 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 onclick event.
In Part 9 we examined how to enhance the DataGrid's editing
interface by having the editing interface's TextBox receive focus when the page is loaded.
In Part 10 we looked at how to (automatically) add filtering
buttons so that one can filter the data in a DataGrid. In this eleventh part, we'll examine how to
create a DataGrid Web control with a column of related radio buttons - a task much more difficult than
you might think!
|
|
Introduction
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
same 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
the 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 GroupName is
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 (ThisDoesntWork)!
This is because the DataGrid is being built up row-by-row it prepends the rows ID property
to the 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: dgPopularFAQs:_ctl2:ThisDoesntWork,
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
name attribute is assigned the same value
when the DataGrid prepends the DataGridItem and DataGrid ID properties to the name
attribute? 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 name attribute. (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 bin\Release directory
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!
