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.
<% @Import Namespace="System.Data" %>
<% @Import Namespace="System.Data.SqlClient" %>
<%@ Register TagPrefix="mbrsc" Namespace="MetaBuilders.WebControls"
Assembly="MetaBuilders.WebControls.RowSelectorColumn" %>
<script language="vb" runat="server">
...
Sub RecordVote(sender as Object, e as EventArgs)
Dim rsc as RowSelectorColumn = RowSelectorColumn.FindColumn(dgPopularFAQs)
If rsc.SelectedIndexes.Length = 0 then
lblVoteResults.Text = "You did not select a FAQ!"
Else
Dim selIndex as Integer = rsc.SelectedIndexes(0)
lblVoteResults.Text = "You voted for item " & selIndex & _
", which is the FAQ with FAQID " & _
dgPopularFAQs.DataKeys(selIndex) & "<p>"
End If
End Sub
</script>
<form runat="server">
<h3>Vote for Your Favorite FAQ!</h3>
<asp:Label runat="server" id="lblVoteResults" ForeColor="Red"
Font-Italic="True" Font-Size="14pt" />
<asp:DataGrid runat="server" id="dgPopularFAQs"
...
DataKeyField="FAQID"
AutoGenerateColumns="False">
<Columns>
<mbrsc:RowSelectorColumn SelectionMode="Single" />
<asp:BoundColumn DataField="FAQID" HeaderText="FAQ ID" />
<asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
</Columns>
</asp:datagrid><br />
<asp:Button runat="server" onclick="RecordVote" text="Record Vote" />
</form>
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:
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.
<% @Import Namespace="System.Data" %>
<% @Import Namespace="System.Data.SqlClient" %>
<%@ Register TagPrefix="mbrsc" Namespace="MetaBuilders.WebControls"
Assembly="MetaBuilders.WebControls.RowSelectorColumn" %>
<script language="vb" runat="server">
...
Sub RecordVote(sender as Object, e as EventArgs)
Dim rsc as RowSelectorColumn = RowSelectorColumn.FindColumn(dgPopularFAQs)
Dim selIndex as Integer
For Each selIndex in rsc.SelectedIndexes
lblVoteResults.Text &= "You chose item " & selIndex & _
", which is the FAQ with FAQID " & _
dgPopularFAQs.DataKeys(selIndex) & "<br>"
Next
lblVoteResults.Text &= "<p>"
End Sub
</script>
<form runat="server">
<asp:DataGrid runat="server" id="dgPopularFAQs"
...
DataKeyField="FAQID"
AutoGenerateColumns="False">
<Columns>
<mbrsc:RowSelectorColumn AllowSelectAll="True" SelectionMode="Multiple" />
<asp:BoundColumn DataField="FAQID" HeaderText="FAQ ID" />
<asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
</Columns>
</asp:datagrid>
<br />
<asp:Button runat="server" onclick="RecordVote" text="Record Vote" />
</form>
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.
Download the RowSelectorColumn control (this is a
ZIP file hosted on the 4Guys Web server; for the most up-to-date version be sure to get it from
MetaBuilders.com. Also, if you would like to allow others
to download the RowSelectorControl from your own Web site, please
contact Andy Smith first and obtain
his permission.)
