Single RadioButton check at a time with row selection

Requirements
RadGrid for ASP .NET version RadControls for ASP .NET AJAX version	4.6.0 and later 2008.1.415 and later
.NET version	2.0 and later
Visual Studio version	2005 and later
Programming language	C#
Browser support	all supported by RadGrid for ASP .NET all browsers supported by RadControls for ASP .NET AJAX

 
PROJECT DESCRIPTION

This project represents a symbiosis of radio check and row selection by means of a radio button residing in item template of RadGrid template column

Steps to be followed:

1. Call the function setGrdRadioButtonOnClick() in the Page_Load to find each radioButton in the grid items.
2. Add OnClick attribute to the radio button to invoke the javascript function "SelectMeOnly" which will select only one button at a time.
3. Select the row which corresponds to the checked radio button in the RadioButton's CheckedChanged event handler.
   
   CS:
   

   using System;

   using System.Data;

   using System.Configuration;

   using System.Collections;

   using System.Web;

   using System.Web.Security;

   using System.Web.UI;

   using System.Web.UI.WebControls;

   using System.Web.UI.WebControls.WebParts;

   using System.Web.UI.HtmlControls;

   using Telerik.WebControls;

   using System.Data.OleDb;

   public partial class SelectOneCheckboxAtTime : System.Web.UI.Page

   {

   //Declare a global DataTable dtTable

   public static DataTable dtTable;

   protected void Page_Load(object sender, EventArgs e)

   {

   //Function to select one Radio Button at a time

   setGrdRadioButtonOnClick();

   }

   protected void RadGrid1_NeedDataSource(object source, Telerik.WebControls.GridNeedDataSourceEventArgs e)

   {

   //Populate the Radgrid

   OleDbConnection MyOleDbConnection = new OleDbConnection

   ("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~//App_Data//NWind.mdb"));

   //the database in the web application root

   OleDbDataAdapter MyOleDbDataAdapter = new OleDbDataAdapter();

   dtTable = new DataTable();

   MyOleDbConnection.Open();

   try

   {

   string query = "SELECT CategoryID,CategoryName FROM Categories";

   MyOleDbDataAdapter.SelectCommand = new OleDbCommand(query, MyOleDbConnection);

   MyOleDbDataAdapter.Fill(dtTable);

   RadGrid1.DataSource = dtTable;

   }

   finally

   {

   MyOleDbConnection.Close();

   }

   }

   public void setGrdRadioButtonOnClick()

   {

   int i;

   RadioButton radioButton;

   for (i = 0; i < RadGrid1.Items.Count; i++)

   {

   radioButton = (RadioButton)RadGrid1.Items[i].FindControl("rdSelect");

   radioButton.Attributes.Add("OnClick", "SelectMeOnly(" + radioButton.ClientID + ", " + "'RadGrid1'" + ")");

   }

   }

   protected void rdSelect_CheckedChanged(object sender, EventArgs e)

   {

   ((sender as RadioButton).Parent.Parent as GridItem).Selected = (sender as RadioButton).Checked;

   }

   }

   
   VB.NET
   

   Imports System

   Imports System.Data

   Imports System.Configuration

   Imports System.Collections

   Imports System.Web

   Imports System.Web.Security

   Imports System.Web.UI

   Imports System.Web.UI.WebControls

   Imports System.Web.UI.WebControls.WebParts

   Imports System.Web.UI.HtmlControls

   Imports Telerik.WebControls

   Imports System.Data.OleDb

   Public Partial Class SelectOneCheckboxAtTime

   Inherits System.Web.UI.Page

   'Declare a global DataTable dtTable

   Public Shared dtTable As DataTable

   Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load

   'Function to select one Radio Button at a time

   setGrdRadioButtonOnClick()

   End Sub

   Protected Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As Telerik.WebControls.GridNeedDataSourceEventArgs)

   'Populate the Radgrid

   Dim MyOleDbConnection As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~//App_Data//NWind.mdb"))

   'the database in the web application root

   Dim MyOleDbDataAdapter As New OleDbDataAdapter()

   dtTable = New DataTable()

   MyOleDbConnection.Open()

   Try

   Dim query As String = "SELECT CategoryID,CategoryName FROM Categories"

   MyOleDbDataAdapter.SelectCommand = New OleDbCommand(query, MyOleDbConnection)

   MyOleDbDataAdapter.Fill(dtTable)

   RadGrid1.DataSource = dtTable

   Finally

   MyOleDbConnection.Close()

   End Try

   End Sub

   Public Sub setGrdRadioButtonOnClick()

   Dim i As Integer

   Dim radioButton As RadioButton

   i = 0

   While i < RadGrid1.Items.Count

   radioButton = CType(RadGrid1.Items(i).FindControl("rdSelect"), RadioButton)

   radioButton.Attributes.Add("OnClick", "SelectMeOnly(" & radioButton.ClientID & ", " & "'RadGrid1'" & ")")

   End While

   End Sub

   Protected Sub rdSelect_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)

   CType(CType(sender, RadioButton).Parent.Parent, GridItem).Selected = CType(sender, RadioButton).Checked

   End Sub

   End Class

   
   ASPX:
   

   <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadioSelectForRadGrid .aspx.cs" Inherits="SelectOneCheckboxAtTime" %>

   <%@ Register Assembly="RadGrid.Net2" Namespace="Telerik.WebControls" TagPrefix="radG" %>

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <html xmlns="http://www.w3.org/1999/xhtml" >

   <head runat="server">

   <title>Untitled Page</title>

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

   function SelectMeOnly(objRadioButton, grdName)

   {

   var i, obj;

   for (i=0; i<document.all.length; i++)

   {

   obj = document.all(i);

   if (obj.type == "radio")

   {

   if (objRadioButton.id.substr(0, grdName.length) == grdName)

   if (objRadioButton.id == obj.id)

   obj.checked = true;

   else

   obj.checked = false;

   }

   }

   }

   </script>

   </head>

   <body>

   <form id="form1" runat="server">

   <div>

   <radG:RadGrid ID="RadGrid1" runat="server" GridLines="None"

   OnNeedDataSource="RadGrid1_NeedDataSource" Skin="Glassy" EnableAJAX="True" Width="668px">

   <MasterTableView>

   <Columns>

   <radG:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="Select ">

   <ItemTemplate>

   &nbsp;<asp:RadioButton ID="rdSelect" runat="server"   AutoPostBack="True" OnCheckedChanged="rdSelect_CheckedChanged" />

   </ItemTemplate>

   </radG:GridTemplateColumn>

   </Columns>

   <ExpandCollapseColumn Visible="False">

   <HeaderStyle Width="19px" />

   </ExpandCollapseColumn>

   <RowIndicatorColumn Visible="False">

   <HeaderStyle Width="20px" />

   </RowIndicatorColumn>

   </MasterTableView>

   <ClientSettings>

   <Selecting AllowRowSelect="True" />

   </ClientSettings>

   </radG:RadGrid></div>

   </form>

   </body>

   </html>

   
   
   
   
   
   

Hi Princy,

Thank you for the submission - this demo will surely be helpful for other members of the Telerik community. However, since the javascript is not cross-browser compatible, I have modified it a bit to ensure that the logic will be executed properly under Gecko-based browsers and Opera. Below is the updated version of the script:


Additionally, I have added VB.NET version of the C# code to your post.

Thank you for the involvement - 1000 Telerik points were added to your account.

Best regards,
Stephen
the telerik team

Stephen,

This is pretty much what I want, however I still need all the Client Side selection to happen with selecting the row...  I'm using a "GridClientSelectColumn".  Everything works great, selecting a single row checks the checkbox and selecting another clears the check as I only want users to be able to select a single item.  Here's the rub.  It's pretty standard in most UIs that checkboxes signify multiple selection opportunities while radio buttons are single selection.  What is the "easiest" path for me to just display radio buttons rather than checkboxes for my select column?

BTW, other than this, client is EXTREMELY happy with the functionality...  Great products!!!

Thanks,
Russel

Hi Russel,

Thank you for the nice words about our products.

The GridClientSelectColumn does not support RadioButtons mode. If you would like to display radio buttons you will need to use the approach presented in this code library thread. On top of that, if you prefer to select rows along with changing the status of the radio button in a row, utilize the SelectRow(rowObject, isSingleSelect) client-method of RadGridTable object.

Best regards,
Stephen
the Telerik team

Dear Stephen:

I appreciate very much the guidance you have offered here.   I have just been hired here at Northrop Grummun, and was told that the department bought Telerik's ASP.Net controls.   I have never used Terlerik controls before, so for the week before I started I worked every day doing every example in the Telerik tutorial to become familiar with the product.   When I started my job yesterday, I told my boss that I had done the entire 600+ page tutorial, and he then told me that none of the rest of the team has any experience with the Telerik control and that I will have to guide them.  Wow.

So now I am about to start a small project, and I hope to dazzle them with the Telerik controls.   I am first doing a page where employees across country can sign up to come to a four-day symposium.   Each attendee is encourage to sign up for one of 3 all-day courses for each day.   So consequently, I envision a Telerik grid with a row for each day, and then either 3 radio button within each row  to represent the 3 choices, but the applicant can only sign up for one class on each day.   Therefore, I though radio buttons.   Within the knowledge base of this forum, I saw where someone suggested to use "RadioListButtons" in a grid.   But here, if I understand you correctly,  you are saying that the "The GridClientSelectColumn does not support RadioButtons mode".

Forgive the primitive question, but does it likewise follow that the Telerik grid would not support the "RadioListButtons" as well as just "RadioButtons"?   In other words, if I am to succeed, should I stick to using CheckBoxes within the Telerik grid?

Sincerely,


Burton G. Wilkis

Hi Burton,

Thank you for the detailed explanation.

You can embed RadioButtons or RadioButtonList inside template column of RadGrid, however what I had in mind is that in such case you cannot take advantage of the automatic row selection functionality available with GridClientSelectColumn. Hence with RadioButtons you will need to implement custom logic to attain the functionality you are searching for.

If you intend to use RadioButtons or RadioButtonLists consider using the following topic from the online help as a starting point and modify the code in par with your preferences:

http://www.telerik.com/help/aspnet/grid/?grdUseAJAXToUpdateOutsideControls.html

Best regards,
Stephen
the Telerik team

Thanks guys.
I had to tweak it to get it to work with master pages though. I assume its because the master page changes the names of the client side elements.

Tweak #1:  comment out the check on line 11

 

Tweak #2: move the onclick handler setup code to the itemCreated event handler

 

 

Hi Princy!

This is a relevant solution what I wanted in my project. But this solution is not working when pagination is applied on the grid. It works pefectly on the first page and moving further on other pages it doesnt works fine.. I mean, I can select multiple radio buttons.
One thing I wanted to suggest in this solution is, the way you called rdSelect_CheckedChanged and you select that row, it should be vice-versa too. That means when you select a row in the grid radio button should also get checked at the same time automatically.

Second thing what I needed is: -
I just wanted to know if I can reduce the server call in this situation.
I dont want to everytime hit the server to select a single row like in
 

1	protected void rdSelect_CheckedChanged(object sender, EventArgs e)
2	{
3	//Select the row whose RadioButton is selected
4	((sender as RadioButton).Parent.Parent as GridItem).Selected = (sender as RadioButton).Checked;
5	}

Instead of server side, I want to handle this on client side and for that i just added some piece of code on  

SelectMeOnly function on client side.
To do that I added one more parameter while calling this function as     

1	public void setGrdRadioButtonOnClick()
2	{
3	//Create a Radio Button object
4	RadioButton radioButton;
5	for (int i = 0; i < grdSurvey.Items.Count; i++)
6	{
7	//Find the Radio Button which was selected by the User
8	radioButton = (RadioButton)grdSurvey.Items[i].FindControl("rdSelect");
9	//Call the javascript function SelectMeOnly in the OnClick event
10	radioButton.Attributes.Add("OnClick", "SelectMeOnly(" + i + "," + radioButton.ClientID + ", " + "'grdSurvey'" + ")");
11
12	}
13	}
14

 

 

 I am sending the data item (see line number 10 above) count of grid item and handling this in the client function below:  

 

 

1	function SelectMeOnly(itemNum, objRadioButton, grdName)
2	{
3	var i, obj, pageElements;
4
5	if(navigator.userAgent.indexOf("MSIE")!= -1)
6	{
7	//IE browser
8	pageElements = document.all;
9	}
10	else if(navigator.userAgent.indexOf("Mozilla") != -1 || navigator.userAgent.indexOf("Opera")!= -1)
11	{
12	//FireFox/Opera browser
13	pageElements = document.documentElement.getElementsByTagName("input");
14	}
15	for (i=0; i < pageElements.length; i++)
16	{
17	obj = pageElements[i];
18
19	if (obj.type == "radio")
20	{
21	if (objRadioButton.id.substr(0, grdName.length) == grdName)
22	{
23	if (objRadioButton.id == obj.id)
24	{
25	obj.checked = true;
26	}
27	else
28	{
29	obj.checked = false;
30	}
31	}
32	}
33	}
34
35	var masterTable = $find("<%=grdSurvey.ClientID%>").get_masterTableView();
36
37	for (i=0; i < masterTable.get_dataItems().length; i++)
38	{
39	var dataItem = masterTable.get_dataItems()[i];
40	if (i == itemNum )
41	{
42	dataItem.set_selected(true);
43	}
44	else if (i != itemNum && dataItem.get_selected() == true)
45	{
46	dataItem.set_selected(false);
47	}
48	}
49
50	}

 

 

 I added the code (line 35 to line 48) to select the data item in grid. But this is only working on the first page of grid whereas when we move on next page it is not working at all.. rather it started selected mulitple rows itself.

Please suggest if I am going wrong.. I am very new to this .. so must be committing big blows.
Thanks!
With Regards,
Fatima Khan
 

 

 

 

Hi All,

If you have some other radio button on the page the JS script will make them also deselected along with the one in your grid.

I have tweaked the JS nto to happen that.


in the else part
you have have this 

if (obj.id.indexOf(grdName) >= 0) {

obj.checked = false;

}

so that when deselect the radio button always make sure that belongs to the grid. then only you need to deselect. Otherwise if you have other radio buttons on the page, all of those will get deselected.

Hope this helps.
-Mythreyi

The sample code still allows multiple radio selection. Did anybody get it working single row select radio? These are all everyday requirements. It should be built in function of radgrid itself instead of writing tonnes of code on top of that.

Hi Fatima,

BUMP!!! The same issue.
I'm fully agree with Jayakumar Dwarakadas : It should be built in function of radgrid itself instead of writing tonnes of code on top of that.

Hi,

Can't we use GroupName property of the RadioButton to achieve the functionality of single selection?
Please explain why if the answer is no?

Regards,
Amit Dubey

You need to break the FOR for single selection.

if (obj.RadioButton.id == obj.id)
{
     obj.checked = true;
     break;
}
else
   obj.checked = false;


hope it helps.

Thanks princy for the code..
Its working perfect..

God bless

I have a user control that one radgird inside it and add user control into webform that inherits masterpage. i use this solution in this thread but not work. please help me

thanks

Below Code Smaple Worked for me

ASPX:

Javascript:

Hello,

I tried to follow Princy, many  many times, also others' way. 

But result is: SelectedItem of radgrid change, OK, that's good. But when I select another row by clicking another radio button, the old radio button is not unchecked.

Here is my copy-code

aspx file: 
- javascipt:

- my RadGrid:



so sorry, some code is secret of my work.

and aspx.cs file


did I copy wrong?

I debuged on IE, Chrome and Firefox, but same above result.

Can someone help me?

Hello  darren


i tried Following codes ...


 <rad:GridTemplateColumn HeaderText="Check" HeaderStyle-Width="60px" UniqueName="CheckColumn"
                            DataField="Barcode">
                            <ItemTemplate>
                                <asp:RadioButton ID="rbCheck" runat="server" onclick="OnRadioClick(this);" Text="Select"
                                    AutoPostBack="true" />
                            </ItemTemplate>
                        </rad:GridTemplateColumn>
        


function OnRadioClick(rb) {
        var grid = $find("<%=Grid1.ClientID %>");
        var element = grid.get_element();
        var rbs = element.getElementsByTagName("input");
        for (var i = 0; i < rbs.length; i++) {
            if (rbs[i].type == "radio") {
                if (rbs[i].checked && rbs[i] != rb) {
                    rbs[i].checked = false;
                    break;
                }
            }
        }
    }




But How to i get selected row values in telerik radgrid