using radiobuttons in a gridview control

问题:

I have a gridview control in which the data is dispalyed using a stored procedure. the grid has three columns, first one contains radiobuttons. the general idea is that the user should be able to select only one radiobutton from (in my case) 5 radiobuttons.

The problem in the present functionality is that i can select all the radiobuttons at the same time. I tried group the radiobuttons using 'groupname' property..it didn't work.

How can i fix it?

Here is the gridview control

<asp:GridView UseAccessibleHeader="true" ID="GridView1" CssClass="top" EmptyDataText="" HeaderStyle-CssClass="griditem_heading" HeaderStyle-BackColor="" runat="server" AllowSorting="True" AutoGenerateColumns="False" CellPadding="0" Width="100%">
<EmptyDataRowStyle />
<EmptyDataTemplate>
    <table cellspacing="0" cellpadding="0" border="0" id="dgd_Clinic_empty" width="100%">
        <tr>
            <td valign="Middle" align="Center" bgcolor="#cce57f" class="griditem_1">
                <span class="smalltableheading">&nbsp;&nbsp;&nbsp;</span>
            </td>
            <td valign="Middle" align="Center" bgcolor="#cce57f" class="griditem_1">
                <span class="smalltableheading">Clinic Name</span>
            </td>

            <td valign="Middle" align="Center" bgcolor="#cce57f" class="griditem_1">
                <span class="smalltableheading">Open</span>
            </td>
      </tr>
        <tr>
            <td colspan="8" align="Center">
                <span class="Content"><b>No matching records were found.</b></span>
            </td>
        </tr>
    </table>
</EmptyDataTemplate>
<Columns>
    <asp:TemplateField HeaderText="" HeaderStyle-CssClass="griditem_heading" ItemStyle-CssClass="griditem_1"
        HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle" SortExpression=""
        Visible="True" ItemStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
        <asp:Label for="rad1_1" ID="rad1_1" runat="server" Visible="false"> </asp:Label>                
            <asp:RadioButton ID="rdoClinicId" runat="server"  />                                  
         </ItemTemplate>                
    </asp:TemplateField>       
        <asp:TemplateField HeaderText="Clinic Name" HeaderStyle-CssClass="griditem_heading"
        ItemStyle-CssClass="griditem_1" HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle"
        SortExpression="clinic_name" Visible="True" ItemStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
            <asp:Label ID="lbl_Grd_Clinic_Name" runat="Server" Text="" ToolTip="" Width="" Height=""
                Style="" />                 
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Open" HeaderStyle-CssClass="griditem_heading"
        ItemStyle-CssClass="griditem_1" HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle"
        SortExpression="Open" Visible="True" ItemStyle-VerticalAlign="Middle"
        ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
              <asp:Label ID="lbl_Grd_Open" runat="Server" Text="" ToolTip="" Width="" Height="" Style="" />                    
        </ItemTemplate>
    </asp:TemplateField>

</Columns>
</asp:GridView>

回答1:

Since a gridview is rendered as table element , at run time it will assign different "name" to each radio button giving GroupName won't work.

But calling a JavaScript function for validating the radio button to select one radio button at a time instead of giving same GroupName for multiple radio button outside gridview.

The javascript function sets the row of the current selected radio button's style to determine that the row is selected and then loops through the radio buttons in the gridview and then de-select the previous selected radio button and set the row style back to its default.

See the code below,

JavaScript section,

 <script language="javascript" type="text/javascript">
    function CheckOtherIsCheckedByGVID(rb) {
           var isChecked = rb.checked;
           var row = rb.parentNode.parentNode;

           var currentRdbID = rb.id;
           parent = document.getElementById("<%= GridView1.ClientID %>");
           var items = parent.getElementsByTagName('input');

           for (i = 0; i < items.length; i++) {
           if (items[i].id != currentRdbID && items[i].type == "radio") {
           if (items[i].checked) {
                items[i].checked = false;                   
            }
        }
     }
   }
</script>

Aspx section,

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField>
               <ItemTemplate>                          
                    <asp:RadioButton runat="server" ID="RadioButton1" onclick="javascript:CheckOtherIsCheckedByGVID(this);">
                    </asp:RadioButton>
               </ItemTemplate>
            </asp:TemplateField>                
        </Columns>
    </asp:GridView>

NOTE: the onclick used here is th html property and will appear within intellisense property of visual studio. So just type this as provided in my code.

I tested this and worked perfectly for me.

Hope this will work for you..

回答2:

As mentioned, setting the GroupName while in a GridView doesn't work. When the HTML is generated for the GridView, all of the Radio Buttons get assigned different names based on the GridView. Here's a link that might help you out:

They go through numerous methods of doing exactly what your asking to do. I tried also setting the ClientIDMode to static thinking that would keep the names, but that didn't work either.

Hopefully that link helps.

回答3:

I have a blog about this HERE.

Ends up looking like:

The part that makes it work is:

<asp:TemplateField HeaderText="Best">
     <ItemTemplate>
          <input id="RBBest" type="radio" name="RBBest" value="{0}" />
     </ItemTemplate>
     <ItemStyle HorizontalAlign="Center" />
 </asp:TemplateField>

Notice this is HTML inside the ItemTemplate and not ASP.Net markup. We get the selected index by using:

Request.Form["RBBest"]

so to get the text in the second column in the example I use:

ViewState["selectedBest"] = 
     this.GridView1.Rows[Convert.ToInt32(Request.Form["RBBest"])].Cells[1].Text;

Which returns the text "SQL Server" in the example.

回答4:

Harun's Answer is very good: just check off the other ones.

I do it using a Class and JQuery:

function removeotherrb(rb) {
        var items = $('.QaWs2');
        for (i = 0; i < items.length; i++) {
            var c1 = items[i].firstChild; 

           c1.checked = false;
       }
       rb.checked = true;            
   }

Note that I first check OFF Everything and then set the selected one back on. Note the when a cssclass is set, a span with this class is created so you have to target the firstchild; HTML is rendered as follow:

<span class="QaWs2">
<input id="ctl00_PageSectionPH_GVCol_ctl04_RB2" type="radio"     onclick="removeotherrb(this);" value="RB2" name="ctl00$PageSectionPH$GVCol$ctl04$Y"><input>
</span>