RadioButtons inside the GridView control
By AzamSharp
Views: 13816

Introduction:

In one of my articles I discussed that how you can get the values of the selected checkboxes that are inside the GridView control. In this article I will show you that how you can use RadioButtons inside the GridView control.

Big deal about Radio Buttons:

You must be wondering that what is the big deal about it since I can simply place a web server RadioButton control inside the GridView and retrieve the value of the selected row just like I did for CheckBoxes. Well RadioButtons are different since you can select only one of them at a time. Then you must be thinking that so what I will give the name to the RadioButtons and that will take care of the problem. Not exactly since GridView is rendered as several rows and each row has an id. Now if RadioButtons are rendered inside the GridView control then the GridView control will assign them the name at runtime which will be different.


You should also check out "Select Multiple CheckBoxes Inside the GridView Control".

The effect will be that you will be able to select multiple RadioButtons. So, lets see in this article that how we can solve this problem.

Using the HTML RadioButton:

The solution is pretty simple. Just use HTML RadioButton instead of the RadioButton web server control. Let's see how this is done. First of all you need to add a template column in the GridView control which will contain the RadioButton.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White"

BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="Verdana">

<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />

<Columns>

<asp:BoundField DataField="CategoryID" HeaderText="CategoryID" />

<asp:BoundField DataField="CategoryName" HeaderText="CategoryName" />

<asp:BoundField DataField="Description" HeaderText="Description" />

<asp:TemplateField HeaderText="Select One">

<ItemTemplate>

<input name="MyRadioButton" type="radio" value='<%# Eval("CategoryID") %>' />

</ItemTemplate>

</asp:TemplateField>

</Columns>

<RowStyle BackColor="White" ForeColor="#330099" />

<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />

<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />

<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />

</asp:GridView>

I have made the TemplateColumn bold so it will be easier for you to identify. I have given the name "MyRadioButton" to the HTML RadioButton. Since, I want the primary key of the row when RadioButton is checked that is why I have bound it to the value of the CategoryID.


Let's see a picture so that you know what is going on:

As you can also see that there is a Button control of the form. Now I want that when I press the button I will get the CategoryID of the row whose RadioButton is checked. This is pretty easy check out the code below:

protected void Button1_Click(object sender, EventArgs e)

{

string selectedValue = Request.Form["MyRadioButton"];

lblMsg.Text = selectedValue;

}

Request.Form takes the name of the control like in this case "MyRadioButton" and returns the value back to the variable.

I have attached the source code files so please feel free to download it.

I hope you liked this article, happy coding!

If you are one of the thousands that visit GridViewGuy for your .NET articles and resources, you might be interested in making a donation. Extra cash helps pay for the hosting services and speed things up around here, and makes this website possible.

Make a Donation

Once, again thank you very much and remember its because of you FINE people that this website is up and running.

 

Export Button is a custom control that let's you export your DataGrid or TextBox data to several different formats. The control is extremely easy to use and also exposes design time features. In this article I will discuss some of the features of the Export Button and how it benefits the developer.

BUY IT NOW

 

 

By AzamSharp




Enter Comment/Feedback
  •  
  •  
  •  
  •  
  •  

Comments/Feedbacks
Subject: This won't work
Name: aspneter
Date: 1/25/2007 9:35:53 AM
Comment:
I don't understand why this post is never updated. This method won't work! You'll be able to select mutiple radio buttons!
Subject: This will work :)
Name: AzamSharp
Date: 1/25/2007 9:57:36 AM
Comment:
Hi Aspneter,

This will work perfectly. The reason is that I am using an input type radio button and not the asp.net radio button. Please try the code and it will work perfectly. You will be able to select a single radio button.

Subject: You are right! Thank you!
Name: aspneter
Date: 1/27/2007 2:02:22 PM
Comment:
Yes! You are right! It works! I'm sorry for making the last comment. Your comment to my post gives the exact answer to my mistake and ignorance.

In fact, this question plagued me for a long time and finally I almost gave up to the conclusion that I have to overwrite the class to realize this functionality. I was wrong!

Thank you for providing a very useful but simple :) solution!
Subject: Maintain State
Name: Steve
Date: 2/11/2007 10:32:59 PM
Comment:
This article is nice. But I would like to maintain radio button state in the gridview. That's the problem I am facing now.
Subject: cannot select value on page load
Name: CD
Date: 2/18/2007 5:51:04 PM
Comment:
This works great for selecting a unique option in the grid. My problem is that I use the control to set a value in the database but when I need to retrieve the record and set the option checked, I cannot. The only workaround I found was to set the runat=server property and access the control onDataRowBound event. But now all of the option are selectable again. Do you know how to access the checked property of the input radio control?
Subject: Maintain State of Radio Button Across Postbacks
Name: AzamSharp
Date: 2/21/2007 7:23:36 PM
Comment:
Check out the following article:

http://gridviewguy.com/ArticleDetails.aspx?articleID=234
Subject: RadioButton Control
Name: aami
Date: 4/9/2007 10:13:34 AM
Comment:
How would I do that if i have another radio Button. Lets say if the admin has to pick one out of two. For example. if Admin pick Approve or deny. I could get the ID of the record but how would i know if he selected the Approve or Deny.
Subject: RE: RadioButton Control
Name: AzamSharp
Date: 4/12/2007 1:11:32 PM
Comment:
Hi Aami,

That would depending on the value of the RadioButton. You can assign 1 for approved and 0 for deny.
Subject: erm
Name: nana23
Date: 6/24/2007 7:25:32 PM
Comment:
i'm using visual studio. is that the only way to retrieve the value?
and what does it mean by '<%# Eval("CategoryID") %>'
Subject: Radio button
Name: Siddarth
Date: 10/4/2007 1:03:24 AM
Comment:
Hi

It's a very nice article. Earlier, I have used Repeator column from GridViewGirl.com.

thanks
Siddarth
Subject: really liked the article
Name: rudra
Date: 11/7/2007 8:11:48 AM
Comment:
Hi ,
I really liked the article but if you can publish a article which contain radiobuttonlist that will great.
Thanks
Rudra
Subject: by using javascript fuinction how to determine selected value
Name: Asmyan
Date: 11/22/2007 4:01:21 AM
Comment:
Hi this is a nice article.

I wanna know if it is possible to get the selected value on client side before posting on server in a javascript function?


Reagrds,
Subject: RE: JavaScript to find the selected radio buttons
Name: AzamSharp
Date: 11/27/2007 12:26:36 PM
Comment:
Hi Asmyan, Yes, you can do that. You will need to get the gridview element using document.getElementById. Then you can get the radio buttons by checking the type of the element and only selecting the radio buttons which have the checked attribute.
Subject: Ask about set the active radiobutton on page load
Name: Barst Mendas
Date: 1/19/2008 6:10:38 AM
Comment:
can we set which row of grid would be check on page load event or on bind event??
Subject: RE: Ask about set the active radio button
Name: AzamSharp
Date: 1/19/2008 9:47:41 AM
Comment:
Hi Barst Mendas, Yes, you can set the radio buttons in the page load. Off course you will need some sort of identifier to find out what radio buttons you need to check. These can be primary keys of the table or maybe the isChecked field in the database. After that simply iterate through the GridView control and check the radio button.
Subject: Cool
Name: thalz142
Date: 2/27/2008 11:41:08 PM
Comment:
Thanks this article saved me from looking another solution:P
Subject: hey
Name: Patrick
Date: 6/11/2008 1:42:52 AM
Comment:
can u use a button instead of a radiobutton so that the event display is happened the moment you click the bound button. tnx
Subject: button controls inside the gidview
Name: senthil
Date: 7/21/2008 5:42:50 AM
Comment:
can u use a button instead of a radiobutton.
Win a free book
You can win yourself ASP.NET AJAX in ACTION
Read details







Join WebHost4Life.com







Copyright GridViewGuy 2007-2008