Click here to Skip to main content
15,867,704 members
Articles / Web Development / HTML
Article

DATAGRID WITH RADIO BUTTON AND SINGLE SELECTION

Rate me:
Please Sign up or sign in to vote.
1.61/5 (12 votes)
17 Apr 2007CPOL 72.7K   13   10
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)


Written By
Technical Lead HCL Technologies
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionCode Behind Pin
webman1229-Oct-12 11:03
webman1229-Oct-12 11:03 
I dont see the code behind using this example? You have the following paramters sugested in this snippet, what do you reference when using the following?

OnItemDataBound="DataGridGetCerts_onItemDataBound"
OnPageIndexChanged="DataGridGetCerts_onPageIndexChanged">
AnswerRe: Code Behind Pin
Ujjwal Prakash29-Oct-12 17:58
Ujjwal Prakash29-Oct-12 17:58 
GeneralAwesome. Late night lifesaver Pin
jcrussell11-May-09 4:41
jcrussell11-May-09 4:41 
GeneralNice script Pin
JagadeeshKumar14-Oct-08 19:46
JagadeeshKumar14-Oct-08 19:46 
GeneralGreat Work Pin
Ashish C19-Sep-07 4:39
Ashish C19-Sep-07 4:39 
GeneralRe: Great Work Pin
Ujjwal Prakash24-Sep-07 0:43
Ujjwal Prakash24-Sep-07 0:43 
GeneralGood Pin
munns3-Sep-07 18:37
munns3-Sep-07 18:37 
GeneralQuestion about using findcontrol Pin
venomAA11-Jul-07 9:27
venomAA11-Jul-07 9:27 
AnswerRe: Question about using findcontrol Pin
Tamil Mannan2-Aug-07 21:42
Tamil Mannan2-Aug-07 21:42 
GeneralGud work Ujwal Pin
Member 384521519-Feb-07 19:50
Member 384521519-Feb-07 19: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.