Displaying a CheckBox or RadioButton in Each Row of a DataGrid
By: Scott Mitchell | Created: 2003-05-09 | Last Updated: 2003-05-15



Imagine that you had a DataGrid that listed a series of products, and you wanted the user to select a single product from the list of products. One way to accomplish this would be to have a column in the DataGrid that displays nothing but a radio button. Then, a user would indicate what product he was interested in by clicking on the appropriate radio button and, perhaps, clicking a "Continue" button outside of the DataGrid. On a related note, you might want to allow the user to choose zero, one, two, or more of the products, and continue to the next page. For this scenario, you'd want a column of checkboxes. (To see what I mean by a column of radio buttons or checkboxes, check out this screenshot.)

When first presented with this problem, you may initially reason that you can just plunker down a TemplateColumn and add a RadioButton or CheckBox Web control in the ItemTemplate. While this approach works for the CheckBox demands, it has some shortcomings with the RadioButton. These problems are discussed in detail in an earlier article of mine, An Extensive Examination of the DataGrid Web Control.

As I discussed in my earlier article, a rather simple and straightforward solution to this problem is to use Andy Smith's fine RowSelectorColumn control. The RowSelectorColumn, which is available for free from Andy's Web site, is a free DataGrid column control. DataGrid column controls, as discussed in Chapter 12 of ASP.NET Data Web Controls, are custom-made compiled classes that can be used in the DataGrid's Columns tag, just like BoundColumns, TemplateColumns, and so on.

The benefit of creating custom DataGrid column controls is that they can be used just like the standard DataGrid columns - that is, all of the code and complexity they contain is neatly tucked away. All that you need to do is add a single line to your DataGrid's Columns tag to add the needed column. For example, the following code snippet, taken from my earlier article An Extensive Examination of the DataGrid Web Control, illustrates the simplicity in using Andy's control:

<asp:DataGrid runat="server" id="dgPopularFAQs" AutoGenerateColumns="False" ...> <Columns> <mbrsc:RowSelectorColumn SelectionMode="Single" /> <asp:BoundColumn DataField="FAQID" HeaderText="FAQ ID" /> <asp:BoundColumn DataField="Description" HeaderText="FAQ Description" /> </Columns> </asp:DataGrid>

The line is all you have to add to get a RadioButton column added to the DataGrid using Andy's RowSelectorColumn! You can check out a live demo showing Andy's control in action.

Andy's control also allows for a column of checkboxes. Furthermore, it can even display a "Select All" checkbox in the header of the column of checkboxes, such that when the "Select All" checkbox is clicked, all of the checkboxes are automatically either selected or unselected (depending on whether you are selecting or unselecting the "Select All" checkbox). For more information on the RowSelectorColumn, be sure to check out Andy's Web site, MetaBuilders.com. In addition to the RowSelectorColumn, he has a number of other free DataGrid column controls available for free.

More Than One Way to Skin a Cat...
There are ways you can get the DataGrid to support a row of radio buttons or checkboxes without using Andy's RowSelectorColumn. For more information on alternative techniques, check out the articles in the Related Articles section in the upper-right hand corner. Personally, I find using Andy's control to be much simpler - the work's already done for you, so you don't have to spend the time reinventing the wheel, and using a DataGrid column control really reduces the amount of code you need to add to your ASP.NET Web page, thus making it much more readable and maintainable.
<shameless plug>
Learn how to create your own custom DataGrid column controls! Chapter 12, Creating Custom Column Controls for the DataGrid, discusses how to quickly get started with creating your own powerful DataGrid column controls.
</shameless plug>


Home | FAQs | Articles | About | Buy the Book!

Copyright 2006, Scott Mitchell. All Rights Reserved.