An Extensive Examination of the DataGrid Web Control: Part 11, Part 2
By 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
/bin directory, 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 SelectionMode property: 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
you'd like.)
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
the 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
static method FindColumn, passing in the DataGrid that the RowSelectorColumn appears in.
Once we have a reference to the RowSelectorColumn, we can examine the SelectedIndexes property,
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 SelectedIndex(0).
The returned index is the index of the row whose radio button was clicked. In the code example I have used
the 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
the 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
SelectionMode property is changed
from Single to Multiple. Additionally, with checkboxes there is an optional AllowSelectAll
property. 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
RowSelectColumn's 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 SelectedIndexex
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. |
Conclusion
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.
Happy Programming!
Attachments
