asked on

How do I unselect and select a radio button on different rows of a GridView?

I have two gridviews on a page. Each grid has a list of things that are potential matches. The users has to pick one item from each grid and then click a "Reconcile" button.

How can I, through JQuery, make sure that only one row in each grid is selected? Specifically I need code to execute on the onclick of a radiobutton (not in a radiobuttonlist because the buttons are spread across rows of the gridview) to unselect all the radio buttons in that grid and then select just the button from which the onclick fired.

Thanks!

This is how the gridview columns are setup:

  <Columns>                        
                        <asp:HyperLinkField DataTextField="ExtractID" 
                            DataNavigateUrlFormatString="~/WebForms/Extract/ExtractList.aspx?extractID={0}"
                            DataNavigateUrlFields="ExtractID" HeaderText="ID" SortExpression="ExtractID" 
                           ItemStyle-BorderColor="#CCCCCC"  />
                        <asp:BoundField DataField="JobName" HeaderText="Job Name"  /> 
                       <asp:BoundField DataField="FileName" HeaderText="File Name" />
                       <asp:BoundField DataField="DeliveryProtocolName" HeaderText = "Delivery Protocol" />
                       <asp:BoundField  DataField="FrequencyName" HeaderText="Frequency" />           
                       <asp:TemplateField HeaderText="Description" >
                        <ItemStyle HorizontalAlign="Left" Width="150" Font-Size="X-Small" />
                            <ItemTemplate>                    
                                    <asp:Label ID="lblDesc"  style=" "  Text='' runat="server"/>                    
                            </ItemTemplate>                                
                       </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:RadioButton ID="rbUserExtractToReconcile" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField> 
                    </Columns>

Open in new window

Extract-Reconciliation-no-menu.png

leakim971

Hello cylikon,

You need to group radio button by give them the same groupname attribute : http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobutton.groupname(VS.100).aspx

Other link : http://msdn.microsoft.com/en-us/library/z26z1156(VS.100).aspx
(section To group individual RadioButton Web server controls)

<asp:RadioButton ID="rbUserExtractToReconcile" GroupName="gnUserExtractToReconcile" runat="server" />

Open in new window

Bruce

ASKER

leakim971: Thanks for the response.

I tried you suggestion but it doesn't seem to work. I think its because the name is mangled by the ASP.NET engine. When I look at the source of the HTML page all the "name"'s of the radio buttons are different.

name="ctl00$ContentPlaceHolder1$gvUserEnteredExtracts$ctl02$gnUserEnteredExtracts"
name="ctl00$ContentPlaceHolder1$gvUserEnteredExtracts$ctl03$gnUserEnteredExtracts"

On that, I did try to add the names manually in the RowDataBound Event but they still got mangled. See my code below.

Any other ideas? Thoughts?

protected void gvUserEnteredExtracts_RowDataBound(object sender, GridViewRowEventArgs e )
    {
        GridViewRow row = e.Row;
        if (row.RowType == DataControlRowType.DataRow)
        {
            RadioButton rb = (RadioButton) row.FindControl("rbUserExtractToReconcile");
            rb.Attributes.Add("name", "gnUserExtractToReconcile");
        }
    }

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

Thanks for the points!