RadioButton inside GridView, How to get it work as normal.

As we all know, RadioButton control used in a situation when you want end-users to select only one option at a time from group of options.

Did you tried before to drag a RadioButton control inside a Gridivew templatefield, and then you attempt to select these RadioButtons , you will notice that the behavior of RadioButton control will be changed and it will work just like the behavior of checkbox control! the user will be able to select more than one radiobutton in the grid!

O.k you can use html radiobutton element instead of server radiobutton control in the templatefield, this will do the trick and the behavior will get back again, but what if you want to do some event in codebeind and collect the selected Radiobutton?! this time you need to add the run at server attribute to the html element to be able to see it in the codebehind, in that case, the behavoir will be changed again and the user can select more than one option from the radio buttons.

So what is the solution for that ?

In simplest scenario, when the situation is only radio button and text beside it, you can use the RadioButtonList control instead, but if the form gets to be more complex and you need to display other controls beside the radiobutton, then (gridview,repeater,datalist) should be your choice.

the below code will help you to accomplish that.

<script type="text/javascript" language="javascript"> 

     

 function fnCheckUnCheck(objId) 

   {

  var grd = document.getElementById("<%= GridView1.ClientID %>"); 

      

   //Collect A

   var rdoArray = grd.getElementsByTagName("input"); 

       

   for(i=0;i<=rdoArray.length-1;i++) 

    { 

     if(rdoArray[i].type == 'radio')

      {

       if(rdoArray[i].id != objId) 

        { 

           rdoArray[i].checked = false; 

        } 

     }

   } 

} 

</script>

<asp:GridView ID="GridView1" runat="server"

 AutoGenerateColumns="false" >

<Columns>

 

<asp:TemplateField HeaderText="Select/UnSelect"> 

<ItemTemplate > 

<input id="grdRdo" name="grdRdo" type="radio" runat="server"

  onclick="fnCheckUnCheck(this.id);" /> 

 </ItemTemplate>

 </asp:TemplateField>

 

<asp:BoundField DataField="User_Name" HeaderText="Name" />

<asp:BoundField DataField="User_Department" HeaderText="Dep" />

   

</Columns>

</asp:GridView>

 

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

 

  For Each grdRow As GridViewRow In GridView1.Rows

    Dim htmlRdo As New HtmlInputRadioButton

   htmlRdo = DirectCast(grdRow.FindControl("grdRdo"), HtmlInputRadioButton)

 

     If htmlRdo.Checked Then

         ' Do Something

     Else

         'Do something else

      End If

 

   Next

 

End Sub

I hope someone will found this very helpful :)

~ Abdulla AbdelHaq

Published Tuesday, August 11, 2009 11:47 AM by Abdulla.Abdelhaq

Comments

# RadioButton inside GridView, How to get it work as normal. | ASP Scribe

Pingback from  RadioButton inside GridView, How to get it work as normal. | ASP Scribe

# RadioButton inside GridView, How to get it work as normal.

Tuesday, August 11, 2009 5:04 AM by WebDevVote.com

You are voted (great) - Trackback from WebDevVote.com

# re: RadioButton inside GridView, How to get it work as normal.

Tuesday, August 11, 2009 10:57 AM by AndrewSeven

Its better to fix the behavior of the control so that the group name works than to add script each time you use it.

What you need to change is the behavior of RenderInputTag(HtmlTextWriter writer, string clientID, string onClick)

so that instead of this

  writer.AddAttribute(HtmlTextWriterAttribute.Name, this.UniqueGroupName);

you have this

  writer.AddAttribute(HtmlTextWriterAttribute.Name, this.GroupName);

unfortunately the method is internal, so you would have to override Render and duplicate the code in the CheckBox's Render and in the RenderInputTag method.

# re: RadioButton inside GridView, How to get it work as normal.

Wednesday, August 12, 2009 2:38 AM by Abdulla.Abdelhaq

Thanks Andrew, it is really nice way to think for solving this :)

Actually you do not need to write my javascript code in every page, you can simple put it inside external Javascript file and then you can add later on as reference.

Your solution was to create a new custom control, where in fact you can solve it too using few simple javascript line of code :)

# re: RadioButton inside GridView, How to get it work as normal.

Wednesday, August 26, 2009 8:08 AM by Manickaraj

Hi i'm Manickaraj, previously i worked in JAVA platform. I am beginner in asp.net, Very very useful this code. So many Thanks U.....

# re: RadioButton inside GridView, How to get it work as normal.

Thursday, August 27, 2009 2:53 AM by satish

hi,

 this is good...

 great job man ...

# re: RadioButton inside GridView, How to get it work as normal.

Monday, October 26, 2009 11:03 AM by ghassan_aljabiri

hello abdullah

i used that script

but unfortunatily i have a runtime error

------------------

Microsoft JScript runtime error: 'null' is null or not an object

--------------

this error happens when interpreting

var rdoArray = grd.getElementsByTagName("input");

NOTE:

i use listview instead of Gridview

Any Ideas

# re: RadioButton inside GridView, How to get it work as normal.

Friday, October 30, 2009 6:43 AM by LakshmiNarayan

Very helpful..

Thanks a lot :)

# re: RadioButton inside GridView, How to get it work as normal.

Friday, November 06, 2009 12:48 PM by ghassan_aljabiri

the erro was because of using an the listview inside an update panel

its resolved now , thanks alot

# re: RadioButton inside GridView, How to get it work as normal.

Tuesday, January 19, 2010 12:20 AM by Adwait Kulkarni

It works perfectly.

Thanks....

# re: RadioButton inside GridView, How to get it work as normal.

Friday, February 26, 2010 7:48 AM by Ian C

Excellent solution thank you

# re: RadioButton inside GridView, How to get it work as normal.

Thursday, March 18, 2010 10:46 AM by TakaIta

> but what if you want to do some event in codebeind and collect the selected Radiobutton?

Then you can find the selected radiobutton back in Request.Form. The important point is that you need to give each radiobutton a unique value. So it is easiest to give it the value of the id of the current record.

<asp:TemplateField ShowHeader="False">

   <ItemTemplate>

       <input type="radio" name="myradio" value="<%# Eval("ID") %>" />                                

   </ItemTemplate>

</asp:TemplateField>

Then look for the value of Request.Form("myradio")

# re: RadioButton inside GridView, How to get it work as normal.

Sunday, April 25, 2010 8:46 AM by Sunil

Nice little article, save my couple of hours time

thanks

# re: RadioButton inside GridView, How to get it work as normal.

Wednesday, May 12, 2010 10:32 AM by Dora743

My code goes like this

protected void btnDelete_Click(object sender, EventArgs e)// ERROR: Handles clauses are not supported in C#

   {

       DataKey key;

       HtmlInputRadioButton rdn;

       foreach (GridViewRow row in grdEditOriginator.Rows)

       {

       //RadioButton rdn = (RadioButton)row.FindControl("RadioButton");

           rdn = (HtmlInputRadioButton)row.FindControl("rbtnOrg");

           if (rdn.Checked)

           {

               oAchdb.CustomerId = Session["CustomerId"].ToString();

               key = grdEditOriginator.DataKeys[row.RowIndex];

               oOriginator.OriginatorId = ((int)key.Value);

               local_strStoreProName = "uspOriginatorDetailsDelete";

               delete(local_strStoreProName);

               lblError.Text = "Successfully Deleted";

           }

       }

       binddata();

   }

But i am getting an erros as object reference not set to an object can any one tell why

# re: RadioButton inside GridView, How to get it work as normal.

Friday, July 02, 2010 3:01 AM by vikas

HI Thank Lot of u..

# re: RadioButton inside GridView, How to get it work as normal.

Thursday, July 22, 2010 9:44 AM by disha

Excellent solutions... even my boss is appriciate when i am done with my work :) thank buddy !

# re: RadioButton inside GridView, How to get it work as normal.

Wednesday, August 25, 2010 2:43 AM by zy

Excellent solutions

# re: RadioButton inside GridView, How to get it work as normal.

Tuesday, October 26, 2010 8:37 AM by swata the programmer

Gr8.. Mr. Abdulla..... It's  very helpful

# re: RadioButton inside GridView, How to get it work as normal.

Tuesday, November 09, 2010 12:04 PM by gabriel

Beautiful, works great. I am using this tag <asp:RadioButton and works great too

# re: RadioButton inside GridView, How to get it work as normal.

Tuesday, November 16, 2010 5:02 AM by Anish Khan

Great Job Dear..

Thanks....

# re: RadioButton inside GridView, How to get it work as normal.

Friday, November 26, 2010 2:22 PM by Vivek

Thanks Bhai ! It works great ! Was fumbling around for a while on this! It worked as a plum!

# re: RadioButton inside GridView, How to get it work as normal.

Wednesday, December 29, 2010 4:05 AM by suphi

very helpfull, thanks

# re: RadioButton inside GridView, How to get it work as normal.

Friday, February 11, 2011 5:25 AM by sanjay

thankyou your code is excellant

# re: RadioButton inside GridView, How to get it work as normal.

Monday, February 21, 2011 12:23 AM by Arun Potti

Good Example

# re: RadioButton inside GridView, How to get it work as normal.

Tuesday, March 01, 2011 8:14 AM by ahsanm.m

nice work.... thanks

# re: RadioButton inside GridView, How to get it work as normal.

Saturday, April 02, 2011 11:34 AM by Gharbi

great job thx

# re: RadioButton inside GridView, How to get it work as normal.

Tuesday, July 05, 2011 8:57 PM by Sushil Dharmar

Brilliant Work Dude...!!!!!!!!

# re: RadioButton inside GridView, How to get it work as normal.

Wednesday, July 20, 2011 8:20 AM by Mudassar

Thanks!!! its works great

# re: RadioButton inside GridView, How to get it work as normal.

Thursday, July 21, 2011 9:15 AM by Rajnish

Thanks for this help.....

# re: RadioButton inside GridView, How to get it work as normal.

Wednesday, August 24, 2011 1:15 AM by rtyecript

I really liked the article, and the very cool blog

# re: RadioButton inside GridView, How to get it work as normal.

Friday, September 09, 2011 1:40 AM by Sanjeev Rana

Thanx Sir It Helps me Gr8...........

# re: RadioButton inside GridView, How to get it work as normal.

Thursday, September 15, 2011 1:57 AM by Upendra Gupta

Thanks Sir....It is working fine.

# re: RadioButton inside GridView, How to get it work as normal.

Monday, September 19, 2011 1:46 AM by Isuru

Thanks mate, U saved my day.

# re: RadioButton inside GridView, How to get it work as normal.

Wednesday, December 07, 2011 4:16 AM by Mark

Thanks a cillion, had soo much trouble getting this to work!

# re: RadioButton inside GridView, How to get it work as normal.

Wednesday, January 11, 2012 5:02 AM by veenu

plz send me ans its urgenttttt?

# re: RadioButton inside GridView, How to get it work as normal.

Wednesday, January 11, 2012 5:05 AM by veenu sehgal

how to disable textbox when click on radio button inside gridview? i am unable to get answer plz help me?

# re: RadioButton inside GridView, How to get it work as normal.

Wednesday, January 11, 2012 5:58 AM by Abdulla.Abdelhaq

Hi,

is the Textbox located inside the gridview ?

Leave a Comment

(required) 
(required) 
(optional)
(required)