When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article
Jobs

ASP ASP.NET ASP FAQs Message Board Feedback ASP Jobs
 
Print this Page!
Published: Thursday, December 26, 2002

An Extensive Examination of the DataGrid Web Control: Part 11

By Scott Mitchell


The Eleventh Part in a Multi-Part Series
This article is the eleventh piece of a multi-part series on using the DataGrid Web control that will span several months. The ASP.NET DataGrid Web control, which displays database information in an HTML table, is highly versatile. The basics of the DataGrid were discussed in Part 1; information on specifying display properties of the DataGrid was discussed in Part 2. In Part 3 we examined how to associate custom events with the DataGrid. In Part 4 we looked at how to extend Part 3 to provide custom sorting on the results of a DataGrid. In Part 5 we examined how to use templates to further customize the DataGrid's appearance. Part 6 examined how to use the DataGrid's built-in editing capabilities, while Part 7 looked at customizing the editing interface using the EditItemTemplate. In Part 8 we looked at how to add client-side code to a ButtonColumn's client-side onclick event. In Part 9 we examined how to enhance the DataGrid's editing interface by having the editing interface's TextBox receive focus when the page is loaded. In Part 10 we looked at how to (automatically) add filtering buttons so that one can filter the data in a DataGrid. In this eleventh part, we'll examine how to create a DataGrid Web control with a column of related radio buttons - a task much more difficult than you might think!

- continued -

  • Read Part 12
  • Read Part 13
  • Read Part 14
  • Read Part 15
  • Read Part 16
  • Read Part 17
  • Read Part 18
  • ASP.NET Data Web Controls Kick Start

    ASP.NET Data Web Controls Kick Start

    ASP.NET Data Web Controls Kick Start is author Scott Mitchell's most recent book, which thoroughly examines three of the most commonly used ASP.NET Web controls: the DataGrid, DataList, and Repeater. These three Web controls can be difficult to master due to their numerous features and capabilities. With this book, you'll quickly become an expert, learning the gritty details and true capabilities of each. This 400+ page book explores the topics in this article series in much greater depth, along with examining various topics and techniques not covered here.

    Scott Mitchell is the editor and founder of 4GuysFromRolla.com, author of the An Extensive Examination of the DataGrid Web Control article series, and author of numerous other ASP and ASP.NET books.

    [Buy this Book]
    [Visit the Book's Companion Web Site]

    Introduction


    A DataGrid with a column of radio buttons. There are many real-world situations in which you might like to create a DataGrid that has a column of radio buttons that serve to allow the user to select a particular row. For example, if you wanted to create some sort of online voting application, you might want to use a DataGrid to display the voting options with a radio button next to each option, so that the user can choose one and only one option.

    Many developers who want to add this sort of functionality think that it is a trivial task, involving merely the addition of a TemplateColumn whose ItemTemplate has a RadioButton Web control. As we will see in this article, the task is not nearly this simple. Specifically, we will look at why using a TemplateColumn with a RadioButton Web control won't cut the mustard, and then we'll examine a free custom DataGrid Column control from Andy Smith's MetaBuilders.com Web site, which easily allows for adding a column of radio buttons to a DataGrid.

    Why the TemplateColumn Approach Won't Work


    The intuitive way to provide a radio button column in a DataGrid is to use a TemplateColumn where the ItemTemplate has a RadioButton control. (We examined the TemplateColumn in Part 5.) This could be accomplished using the following DataGrid markup:

    <form runat="server">
      <asp:DataGrid runat="server" id="dgPopularFAQs" ... >
        <Columns>
          <asp:TemplateColumn>
            <ItemTemplate>
              <asp:RadioButton runat="server" 
                     GroupName="ThisDoesntWork" id="NeitherDoesThis" />
            </ItemTemplate>
          </asp:TemplateColumn>
          <asp:BoundColumn ... />
          ...
        </Columns>
      </asp:datagrid>
    </form>
    
    [View a Live Demo!]

    The above code will create a column that has a radio button in each row, yes, but due to the way that the DataGrid names its containing controls, the user will be able to select multiple radio buttons. (Don't believe me? Try it out in the live demo.) Clearly, being able to select multiple radio buttons breaks the semantics of the radio button metaphor.

    When the Web browser is confronted with a series of radio buttons, it considers radio buttons with the same name attribute to be of the same group of radio buttons. That is, if you have a number of radio buttons on a Web page with the same name attribute, the user will only be allowed to select one of those same named radio buttons.

    The ASP.NET RadioButton Web control provides a GroupName property, that specifically sets the resulting radio button's HTML markup to have the name attribute specified by this property. Therefore, if you need to plop down a related series of RadioButton Web controls, you can simply give all of the RadioButton Web controls the same GroupName property value, which will result in radio button HTML markup where each radio button has the same name attribute, which will result in the user only being able to select one of the related radio buttons.

    However, as you can see in the DataGrid example I provided, even though the GroupName is the same for all RadioButton Web controls in the column, the user can still select more than one distinct radio button. To see why this is, let's take a look at the HTML markup produced by the ASP.NET Web page when the above DataGrid example is used (you can take my word that the below HTML is the HTML markup produced, or you can visit the live demo and do a View/Source):

    <table cellspacing="0" cellpadding="4" ...>
    <tr align="Center" ...>
    	<td>&nbsp;</td><td>FAQ ID</td><td>FAQ Description</td>
    </tr><tr>
    	<td>
            <input id="dgPopularFAQs__ctl2_NeitherDoesThis" 
                   type="radio" 
                   name="dgPopularFAQs:_ctl2:ThisDoesntWork" 
                   value="NeitherDoesThis" />
          </td><td>144</td><td>Where can I host my ASP Web ...</td>
    </tr><tr style="background-color:White;">
    	<td>
            <input id="dgPopularFAQs__ctl3_NeitherDoesThis" 
                   type="radio" 
                   name="dgPopularFAQs:_ctl3:ThisDoesntWork" 
                   value="NeitherDoesThis" />
          </td><td>115</td><td>I am using Access and ...</td>
    </tr><tr>
    	<td>
            <input id="dgPopularFAQs__ctl4_NeitherDoesThis" 
                   type="radio" 
                   name="dgPopularFAQs:_ctl4:ThisDoesntWork" 
                   value="NeitherDoesThis" />
          </td><td>161</td><td>How can I convert a Recordset ...</td>
    </tr>
    ...
    

    The above HTML markup has been shortened considerable for brevity, and is only showing a small subset of the resulting HTML table rows produced by the DataGrid. However, the important part is still noticeable from this sample, and that is that the name property of each of the radio buttons is unique, even though we set the GroupName property to the same value (ThisDoesntWork)!

    This is because the DataGrid is being built up row-by-row it prepends the rows ID property to the GroupName property, using a colon as a delimiter. Then, it prepends the DataGrid's ID property, and this is what the radio button's name attribute is assigned. As you can see, the name for the first FAQ is: dgPopularFAQs:_ctl2:ThisDoesntWork, which, more generally, is: DataGrid ID:DataGridItem ID:GroupName.

    Ensuring that Each Radio Button's name Attribute is Identical


    So how can we make sure that each radio button's name attribute is assigned the same value when the DataGrid prepends the DataGridItem and DataGrid ID properties to the name attribute? The only way that I have found to accomplish this is to use a custom DataGrid column class from which you can explicitly override the naming of the name attribute. (If you know of an easier way, please do let me know.)

    What is a Custom DataGrid Column Class?
    The DataGrid has a number of built-in columns, many of which we have examined throughout this article series. Some of these include the BoundColumn, the TemplateColumn, and the ButtonColumn. A custom DataGrid column class is one that you create yourself. They're fairly easy to create, especially if you have a development tool like Visual Studio .NET (although this isn't a requirement). For more information on creating your own custom DataGrid column class, be sure to read John Dyer's Creating a Custom DataGridColumn Class.

    Rather than writing our own custom DataGrid column class to perform this renaming, let's use one that is already written, is 100% free, and includes complete source code. I am talking about Andy Smith's excellent RowSelectorColumn control, which you can try out and download from http://metabuilders.com/Tools/RowSelectorColumn.aspx.

    Once you download the control, copy the control (the DLL file in the bin\Release directory of the downloaded ZIP file) to your Web application's /bin directory. Then, you can use Andy's control by simply adding:

    <%@ Register TagPrefix="prefix" Namespace="MetaBuilders.WebControls" Assembly="MetaBuilders.WebControls.RowSelectorColumn" %>

    to the top of your ASP.NET Web pages that use the control.

    Let's now turn our attention to using the RowSelectorColumn in an ASP.NET Web page! We'll look at creating a column of radio buttons, as well as a column of checkboxes, using the RowSelectorColumn in Part 2!

  • Read Part 2!



  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article