Single RadioButton check at a time with row selection

20 posts, 0 answers
  1. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 May 2007 Link to this post

    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 ObjectByVal 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 ObjectByVal 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 ObjectByVal 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> 
       





  2. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 08 May 2007 Link to this post

    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:

        <script language="javascript" type="text/javascript">  
        function SelectMeOnly(objRadioButton, grdName)  
        {  
          var i, obj, pageElements;  
            
          if(navigator.userAgent.indexOf("MSIE")!= -1)  
          {  
            //IE browser  
            pageElements = document.all;  
          }  
          else if(navigator.userAgent.indexOf("Mozilla") != -1 || navigator.userAgent.indexOf("Opera")!= -1)  
          {  
            //FireFox/Opera browser  
            pageElements = document.documentElement.getElementsByTagName("input");  
          }  
          for (i=0; i < pageElements.length; i++)  
          {  
            obj = pageElements[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> 

    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

    Instantly find answers to your questions at the new Telerik Support Center
  3. Russel Stieb
    Russel Stieb avatar
    4 posts
    Member since:
    Aug 2005

    Posted 23 May 2007 Link to this post

    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
  4. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 24 May 2007 Link to this post

    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

    Instantly find answers to your questions at the new Telerik Support Center
  5. Burton
    Burton avatar
    2 posts
    Member since:
    Nov 2007

    Posted 11 Dec 2007 Link to this post

    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
  6. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 12 Dec 2007 Link to this post

    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

    Instantly find answers to your questions at the new Telerik Support Center
  7. todd.whitehead
    todd.whitehead avatar
    10 posts
    Member since:
    Nov 2006

    Posted 14 Jan 2009 Link to this post

    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

     

    1         function SelectMeOnly(objRadioButton, grdName)    
    2      {    
    3          
    4     var i, obj;    
    5     for (i=0; i<document.all.length; i++)    
    6      {    
    7       obj = document.all(i);    
    8         
    9       if (obj.type == "radio")    
    10        {            
    11       //if (objRadioButton.id.substr(0, grdName.length) == grdName)    
    12         
    13       if (objRadioButton.id == obj.id)    
    14              obj.checked = true;    
    15          else    
    16              obj.checked = false;    
    17        }    
    18     }        
    19     }   

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

    1     Protected Sub Grid1_ItemCreated(ByVal sender As ObjectByVal e As Telerik.WebControls.GridItemEventArgs) Handles Grid1.ItemCreated  
    2         If (TypeOf e.Item Is GridDataItem) Then 
    3             Dim RadioButton As RadioButton = CType(e.Item.FindControl("RadioButton1"), RadioButton)  
    4             RadioButton.Attributes.Add("OnClick""SelectMeOnly(" & RadioButton.ClientID & ", " & "'Grid1'" & ")")  
    5         End If 
    6     End Sub 

     

     

  8. Fatima
    Fatima avatar
    5 posts
    Member since:
    Feb 2009

    Posted 12 Feb 2009 Link to this post

    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
     

     

     

     

  9. Bill Hodack
    Bill Hodack avatar
    1 posts
    Member since:
    Jun 2008

    Posted 17 Nov 2009 Link to this post

    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.

    <script type="text/javascript" language="javascript">  
        function SelectMeOnly(objRadioButton, grdName) {  
            var i, obj;  
            if (navigator.userAgent.indexOf("MSIE") != -1) {  
                //IE browser     
                pageElements = document.all;  
            }  
            else if (navigator.userAgent.indexOf("Mozilla") != -1 || navigator.userAgent.indexOf("Opera") != -1) {  
                //FireFox/Opera browser     
                pageElements = document.documentElement.getElementsByTagName("input");  
            }  
            for (i = 0; i < pageElements.length; i++) {  
                obj = pageElements[i];  
     
                if (obj.type == "radio") {  
                    if (objRadioButton.id.substr(0, grdName.length) == grdName) {  
                        if (objRadioButton.id == obj.id) {  
                            obj.checked = true;  
                        }  
                        else {  
                            if (obj.id.indexOf(grdName) >= 0) {  
                                obj.checked = false;  
                            }  
                        }  
                    }  
                }  
            }  
        }     
    </script> 

    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
  10. Jayakumar Dwarakadas
    Jayakumar Dwarakadas avatar
    2 posts
    Member since:
    Jan 2010

    Posted 19 Jan 2010 Link to this post

    i increment is missing in the code
    Here is the modified version.

    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'" & ")")  
                i = i +1
            End While 
        End Sub 


  11. Jayakumar Dwarakadas
    Jayakumar Dwarakadas avatar
    2 posts
    Member since:
    Jan 2010

    Posted 19 Jan 2010 Link to this post

    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.
  12. Satish
    Satish avatar
    18 posts
    Member since:
    May 2009

    Posted 10 Feb 2010 Link to this post

    Hi Fatima,

    I even have a similar kind of situation in my project where i have only single selection with paging in grid. 
    Did you get it how to do this? Can you post some code if you got it?

    Regards,
    Satish Kumar.
  13. Evgeny Grigoryev
    Evgeny Grigoryev avatar
    10 posts
    Member since:
    Apr 2010

    Posted 31 Mar 2011 Link to this post

    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.
  14. Amit
    Amit avatar
    1 posts
    Member since:
    Feb 2011

    Posted 12 May 2011 Link to this post

    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
  15. ivan
    ivan avatar
    3 posts
    Member since:
    Aug 2011

    Posted 17 Aug 2011 Link to this post

    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.
  16. Raju Samuel
    Raju Samuel avatar
    1 posts
    Member since:
    May 2010

    Posted 09 Nov 2011 Link to this post

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

    God bless
  17. Feri
    Feri avatar
    1 posts
    Member since:
    Sep 2012

    Posted 25 Sep 2012 Link to this post

    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
  18. darren
    darren avatar
    8 posts
    Member since:
    Jul 2012

    Posted 28 Sep 2012 Link to this post

    Below Code Smaple Worked for me

    ASPX:
    <telerik:GridTemplateColumn HeaderText="Check" HeaderStyle-Width="60px" UniqueName="CheckColumn">
                                       <ItemTemplate>
                                           <asp:RadioButton ID="rbCheck" runat="server" onclick="OnRadioClick(this);" />
                                       </ItemTemplate>
                                   </telerik:GridTemplateColumn>

    Javascript:
    function OnRadioClick(rb) {
                    var grid = $find("<%=RadGrid1.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;
                            }
                        }
                    }
                }
  19. Dương
    Dương avatar
    4 posts
    Member since:
    May 2012

    Posted 30 Oct 2012 Link to this post

    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:
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Src="../../../UserControls/PagingControl.ascx" TagName="PagingControl"
        TagPrefix="uc2" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <script language="javascript" type="text/javascript">
            function SelectMeOnly(objRadioButton, grdName) {
                var i, obj, pageElements;
     
                if (navigator.userAgent.indexOf("MSIE") != -1) {
                    //IE browser
                    pageElements = document.all;
                }
                else if (navigator.userAgent.indexOf("Mozilla") != -1 || navigator.userAgent.indexOf("Opera") != -1) {
                    //FireFox/Opera browser
                    pageElements = document.documentElement.getElementsByTagName("input");
                }
                for (i = 0; i < pageElements.length; i++) {
                    obj = pageElements[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>

    - my RadGrid:

    <telerik:RadGrid ID="grdRooms" runat="server" AllowPaging="true" AllowSorting="False"
                            PageSize="10" Width="99%" CellPadding="1" CellSpacing="1" enableajax="true" OnItemDataBound="grdRooms_ItemDataBound"
                            ShowHeader="true" Culture="vi-VN" OnSelectedIndexChanged="grdRooms_SelectedIndexChanged">
                            <MasterTableView AutoGenerateColumns="False">
                                <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
                                <Columns>
                                    <telerik:GridTemplateColumn UniqueName="TemplateColumn">
                                        <ItemTemplate>
                                            <asp:RadioButton ID="rdSelect" runat="server" AutoPostBack="True" OnCheckedChanged="rdSelect_CheckedChanged" />
                                        </ItemTemplate>
                                        <HeaderTemplate>
                                            Select
                                        </HeaderTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridBoundColumn DataField="Name" HeaderText="Tên phòng">
                                        <HeaderStyle Width="200px" HorizontalAlign="Center" Font-Bold="true" />
                                        <ItemStyle Width="200px" HorizontalAlign="Left" Wrap="true" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Address" HeaderText="Địa chỉ">
                                        <HeaderStyle Width="500px" Font-Bold="true" HorizontalAlign="Center" />
                                        <ItemStyle Width="500px" HorizontalAlign="Left" />
                                    </telerik:GridBoundColumn>


    so sorry, some code is secret of my work.

    and aspx.cs file

    public void setGrdRadioButtonOnClick()
            {
     
                //Create a Radio Button object
                RadioButton radioButton;
                for (int i = 0; i < grdRooms.Items.Count; i++)
                {
                    //Find the Radio Button which was selected by the User
                    radioButton = (RadioButton)grdRooms.Items[i].FindControl("rdSelect");
                    //Call the javascript function SelectMeOnly in the OnClick event
                    radioButton.Attributes.Add("OnClick", "SelectMeOnly(" + radioButton.ClientID + ", " + "'RadGrid1'" + ")");
                }
            }
            protected void rdSelect_CheckedChanged(object sender, EventArgs e)
            {
                //Select the row whose RadioButton is selected
                ((sender as RadioButton).Parent.Parent as GridItem).Selected = (sender as RadioButton).Checked;
            }

    did I copy wrong?

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

    Can someone help me?
  20. Qwicksoft
    Qwicksoft avatar
    10 posts
    Member since:
    Dec 2013

    Posted 09 Jan 2014 Link to this post

    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
Back to Top