Click here to Skip to main content
12,758,605 members (40,918 online)
Click here to Skip to main content
Add your own
alternative version

Stats

59.3K views
106 downloads
13 bookmarked
Posted 8 Nov 2006

DATAGRID WITH RADIO BUTTON AND SINGLE SELECTION

, 17 Apr 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
This article helps in creating a Data Grid with radio button and allows single selection.
  • <a href="DATAGRID_WITH_RADIOBUTTON/SingleSelectRadioButtonInDataGrid.zip">Download source files - 4.00 Kb</a>

Introduction

Placing Radio Button in the row items of Data grid which allows only one of the radio buttons to be selected at a time in Web applications is a well known problem. I came across many solutions, such as, making a custom data grid which allows the "id" property of its child control to be changed or I even found some free "RowSelector" controls available which allow single radio button selection in the data grid. But these solutions provide much of a processing overhead or are complex. I thought that any solution using some JavaScript to accomplish this task would be of great use.

The JavaScript code below will allow accomplishing the intended task of single select of radio button inside a data grid.

<script  language="javascript">
function SelectOne(rdo,gridName)
{
/* Getting an array of all the "INPUT" controls on the form.*/
all=document.getElementsByTagName("input");
 for(i=0;i<all.length;i++)
 {
  if(all[i].type=="radio")/*Checking if it is a radio button*/
  {
/*I have added '__ctl' ASP.NET adds '__ctl' to all 
    the controls of DataGrid.*/
   var count=all[i].id.indexOf(gridName+'__ctl'); 
   if(count!=-1)
   {
    all[i].checked=false;
   }
  }
 }
 rdo.checked=true;/* Finally making the clicked radio button CHECKED */
}
</script>

Below is the DataGrid:

<table width="100%">
 <tr>
     <td align="center">
    <b>
        <u>DATAGRID WITH RADIO BUTTON AND SINGLE SELECTION</u>
    </b>
     </td>
 </tr>
    <tr>
     <td align="center">
      <asp:DataGrid Runat="server" ID="dg" AutoGenerateColumns="False"
     BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px"
    BackColor="White" CellPadding="4" 
    OnItemDataBound="dg_onItemDataBound"
    OnPageIndexChanged="dg_onPageIndexChanged" PageSize="5"
    AllowPaging="True" GridLines="None" Width="25%">
       <FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
       <SelectedItemStyle Font-Bold="True"
    ForeColor="#663399" BackColor="#FFCC66"/>
       <ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
       <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC"
     BackColor="#990000"/>
       <Columns>
        <asp:TemplateColumn>
         <ItemTemplate>
          <input type="radio" runat="server" id="rdo" 
        onclick="SelectOne(this,'dg')" VALUE="rdo" />
     </ItemTemplate>
        </asp:TemplateColumn>
        <asp:BoundColumn DataField="_Id" HeaderText="Id"/>
        <asp:BoundColumn DataField="_Name" HeaderText="Name"/>
       </Columns>
       <PagerStyle HorizontalAlign="Center" 
    ForeColor="#330099" BackColor="#FFFFCC"/>
      </asp:DataGrid>
  </td>
 </tr>
</table>
Happy Reading :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ujjwal Prakash
Technical Lead HCL Technologies
India India
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionCode Behind Pin
webman1229-Oct-12 12:03
memberwebman1229-Oct-12 12:03 
AnswerRe: Code Behind Pin
Ujjwal Prakash29-Oct-12 18:58
memberUjjwal Prakash29-Oct-12 18:58 
GeneralAwesome. Late night lifesaver Pin
jcrussell11-May-09 5:41
memberjcrussell11-May-09 5:41 
GeneralNice script Pin
JagadeeshKumar14-Oct-08 20:46
memberJagadeeshKumar14-Oct-08 20:46 
GeneralGreat Work Pin
Ashish C19-Sep-07 5:39
memberAshish C19-Sep-07 5:39 
GeneralRe: Great Work Pin
Ujjwal Prakash24-Sep-07 1:43
memberUjjwal Prakash24-Sep-07 1:43 
GeneralGood Pin
munns3-Sep-07 19:37
membermunns3-Sep-07 19:37 
GeneralQuestion about using findcontrol Pin
venomAA11-Jul-07 10:27
membervenomAA11-Jul-07 10:27 
AnswerRe: Question about using findcontrol Pin
Tamil Mannan2-Aug-07 22:42
memberTamil Mannan2-Aug-07 22:42 
GeneralGud work Ujwal Pin
Member #384521519-Feb-07 20:50
memberMember #384521519-Feb-07 20:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170217.1 | Last Updated 17 Apr 2007
Article Copyright 2006 by Ujjwal Prakash
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid