An Extensive Examination of the DataGrid Web Control: Part 11, Part 2By Scott Mitchell
In Part 1 of Part 11 we looked at why we cannot create a functional column of radio buttons in the DataGrid using the TemplateColumn. We then briefly discussed using the RowSelectorControl from Andy Smith's MetaBuilders.com. In this final part we'll examine using this control.
Creating the a DataGrid with a Column of Radio Buttons Using the RowSelectorColumn Control
Once you have downloaded the RowSelectorColumn control and have moved it to your Web application's
/bindirectory, you can use the RowSelectorColumn just like you would any other DataGrid column. The RowSelectorColumn supports both columns of radio buttons and columns of checkboxes; to specify which to use, simply set the RowSelectorColumn's
SelectionModeproperty: set it to Single for radio buttons, and Multiple for checkboxes.
The following example shows an ASP.NET Web page that displays a list of FAQs from ASPFAQs.com and allows the user to select one and click a Button. Once the Button is clicked, the ASP.NET Web page is posted back, and some server-side code is used to determine what radio button was selected.
First, note the
@Register directive near the top. This directive specifies that
the RowSelectorColumn control is referenced using the prefix
mbrsc. (This is the prefix
Andy Smith chose to use in his demo/example of the RowSelectorControl. Feel free to change it to whatever
The RowSelectorColumn then appears in the DataGrid using the
mbrsc prefix as:
<mbrsc:RowSelectorColumn SelectionMode="Single" />
Note that the
SelectionMode property is set to Single, which will display a
radio button for each row.
The ASP.NET page also contains a Button Web control whose
Click event is wired up to
RecordVote event handler. This event handler determines what radio button was clicked.
To determine what radio button was clicked, a local variable,
rsc is assigned to the
RowSelectorColumn instance of the DataGrid. This is accomplished by calling the RowSelectorColumn's
FindColumn, passing in the DataGrid that the RowSelectorColumn appears in.
Once we have a reference to the RowSelectorColumn, we can examine the
which is a collection of indexes that have been selected. First, we check to make sure that a radio button
has been selected by seeing if the
SelectedIndexes.Length property is greater than 0. If it
equals 0, then that means that no radio button was selected; otherwise, we know precisely one radio button
was selected, and we retrieve the index by accessing
The returned index is the index of the row whose radio button was clicked. In the code example I have used
DataKeys collection to determine the primary key of the row whose radio button was clicked.
(Note that the
DataKeyField is set in the DataGrid declaration; for more information on
DataKeys field be sure to read Part 8.)
Creating the a DataGrid with a Column of CheckBoxes Using the RowSelectorColumn Control
Creating a DataGrid with a column of checkboxes with the RowSelectorColumn is strikingly similar to creating a column of radio buttons. The only difference is that the
SelectionModeproperty is changed from Single to Multiple. Additionally, with checkboxes there is an optional
AllowSelectAllproperty. If this is set to True, then at the top of the column of checkboxes will appear a check that, if checked, will cause all checkboxes in the column to become checked.
The above code displays a column of checkboxes, with a checkbox in the DataGrid's header that, when
checked or unchecked will check or uncheck all checkboxes in the column. To create the column of
checkboxes we simply used the same code from the previous example, changing the
SelectionMode property from Single to Multiple.
Note that the
RecordVote event handler was also changed. Since there may be multiple
checked checkboxes, we do not simply just grab the index from the first item in the
property. Rather, we enumerate through all of the indexes.
|The Source Code is Included|
|If you are wondering how, exactly, Andy's RowSelectorColumn control works, you can find out by downloading the control, which includes the full source code. Personally, I have found Andy's code as a great springboard for getting started with authoring my own custom DataGrid columns.|
In this article we looked at how to add a column of radio buttons and a column of checkboxes to a DataGrid using Andy Smith's free RowSelectorColumn control.