Using Custom DataGrid Columns to Extend the Functionality of the DataGrid
| At this point you might be thinking, "Yes, creating custom DataGrid control classes sure looks neat, and they have the advantage of code reuse, encapsulation of complexity, and so on, but they don't provide any functionality I couldn't accomplish using a TemplateColumn." Although this might be true for the examples examined thus far through this chapter, there are certain tasks that can only be accomplished by rolling your own custom DataGrid column class. One good example involves the use of radio buttons with a DataGrid. Imagine that you want to create a DataGrid control that has a column listing only a radio button, with the idea being that the user can select a particular row from the DataGrid by clicking on the row's appropriate radio button. You might think that this is an easy feature to add. After all, you might reason, you could just add a TemplateColumn whose ItemTemplate contains the following code: <asp:TemplateColumn> <ItemTemplate> <asp:RadioButton runat="server" GroupName="someName" /> </ItemTemplate> </asp:TemplateColumn> The GroupName property of the RadioButton Web control specifies how radio buttons should be grouped. That is, if you have a set of RadioButton Web controls, all with the same GroupName, the user can only select one radio button from that group. Unfortunately, the preceding code would not work as expected. Rather than allowing the user to choose only one radio button from the DataGrid column, the user could select one or any of the radio buttons. Figure 12.6 illustrates this by showing a DataGrid that has multiple radio buttons selected. Figure 12.6. When creating a radio button in a TemplateColumn, all the radio buttons in the DataGrid cannot be grouped. This is because when the DataGrid is rendered, each Web control in the DataGrid is provided with a unique ClientID based on its control hierarchy. That is, if you create a Web control in a TemplateColumn and give it an ID of, say, MyControl, the ID of the corresponding rendered HTML control will be along the lines of DataGridID _DataGridItemID _MyControl. Because MyControl's parent is its DataGridItem control, the ID of its DataGridItem control will appear before it in the ID sent to the client. In addition, because the DataGridItem's parent is the DataGrid itself, the DataGrid's ID will also appear. A quick code example should clear up any confusion. Assume that we are trying to provide a radio button for each row in the DataGrid by using the following DataGrid declaration: <asp:DataGrid runat="server" ...> <Columns> <asp:TemplateColumn> <ItemTemplate> <asp:RadioButton runat="server" GroupName="titleChoice" /> </ItemTemplate> </asp:TemplateColumn> <asp:BoundColumn HeaderText="Title" DataField="title" /> <asp:BoundColumn DataField="price" HeaderText="Price" DataFormatString="{0:c}" /> </Columns> </asp:DataGrid> The HTML produced by this DataGrid will be as follows:
Note the id and name attributes of the radio button input tags: dgTitles__ctl2_myRadioButton for the id, and dgTitles:_ctl2:titleChoice for the name. Essentially, the id is rendered as the server-side ID of the Web control concatenated with the IDs of the Web control's ancestors, with an underscore between each ID; the name applies the same algorithm for naming, except it delimits each ID by a colon(:). The reason each radio button in the radio button column can be selected as in Figure 12.6 is because the browser determines whether radio buttons are grouped by the name attribute. That is, radio buttons that share the same name are considered to be grouped, and therefore the browser only allows one of the grouped radio buttons to be selected. However, because the name for each radio button that is sent to the client is unique, the browser allows all the radio buttons to be selected. Is there a solution to this? I am not aware of any way this can be solved without using a custom DataGrid column class. This functionality can be included in a custom DataGrid column class by first writing a class that inherits the HtmlInputRadioButton class and overrides the HtmlInputRadioButton's RenderAttributes method. In overriding this method, this custom class can specify its own name and id attributes that are sent to the client. Hence, it can give all radio buttons in a particular DataGrid column the same name. In addition to this custom radio button class, you'll also need to provide a class for the actual DataGrid column control that then adds the custom radio button control to the TableCell in the InitializeCell() method. If this sounds like a complex process, don't worry! Fortunately, this code has already been written, and is freely available from http://www.metabuilders.com. MetaBuilders.com is a site maintained by Andy Smith, and contains a number of helpful Web controls and custom DataGrid column classes. You can download the complete code for the radio button column class (called RowSelectorColumn) at http://metabuilders.com/Tools/RowSelectorColumn.aspx. Andy also has a number of other custom DataGrid column controls that you can download, including a BoundLookupColumn control and a BoundBooleanControl. TIP You can frequently find Andy Smith over at the ASP.NET Forums at http://asp.net/forums/. If you have a question about the source code for one of his controls, you can ask at the ASP.NET Forums or contact him directly from his Web site. |
titleChoice" value="myRadioButton" /> </td><td>The Busy Executive's Database Guide</td><td>$19.95</td> </tr><tr style="background-color:#EEEEEE;"> <td> <input type="radio" name=" dgTitles:_ctl3: 
EAN: 2147483647
Pages: 111