To read the article online, visit http://www.4GuysFromRolla.com/articles/122602-1.2.aspx

An Extensive Examination of the DataGrid Web Control: Part 11, Part 2

By Scott Mitchell


  • Read Part 1 of Part 11

  • 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>
    
    [View a Live Demo!]

    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.

    <% @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>
    
    [View a Live Demo!]

    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!

  • By Scott Mitchell


    Attachments


  • 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.)

  • Article Information
    Article Title: ASP.NET.An Extensive Examination of the DataGrid Web Control: Part 11, Part 2
    Article Author: Scott Mitchell
    Published Date: December 26, 2002
    Article URL: http://www.4GuysFromRolla.com/articles/122602-1.2.aspx


    Copyright 2017 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers