Click here to Skip to main content
11,411,840 members (48,836 online)
Click here to Skip to main content

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 Smile | :)

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

Comments and Discussions

 
QuestionCode Behind Pinmemberwebman1229-Oct-12 12:03 
AnswerRe: Code Behind PinmemberUjjwal Prakash29-Oct-12 18:58 
GeneralAwesome. Late night lifesaver Pinmemberjcrussell11-May-09 5:41 
GeneralNice script PinmemberJagadeeshKumar14-Oct-08 20:46 
GeneralGreat Work PinmemberAshish C19-Sep-07 5:39 
GeneralRe: Great Work PinmemberUjjwal Prakash24-Sep-07 1:43 
GeneralGood Pinmembermunns3-Sep-07 19:37 
GeneralQuestion about using findcontrol PinmembervenomAA11-Jul-07 10:27 
AnswerRe: Question about using findcontrol PinmemberTamil Mannan2-Aug-07 22:42 
GeneralGud work Ujwal PinmemberMember #384521519-Feb-07 20:50 

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

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

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