Gridview with Radio Buttons

      In my current project, I have to display a grid which has Radio button in each row and user can select one radio button. The task was simple, according tome. I took Template Field and place radio button in item template. I set "GropName"  property to "Commom".  According to me its enough and now user can select only one radio button. However the result was unexpected and I found that user can select more than one !!!!!!. Then I came to know that, GroupName property works only when all radio buttons are in same row. Then I took HTML Control for radio button and set "Name" property. This time, the grid and radio buttons work perfectly.

    As now, Radio buttons are HTML controls, I am not able to get it on server side. When user select any radio button and press submit, Control will not available at code behind, you can use "e.Item.FindControl" as it is not "runat='server'". I want ID "Primary Key" value for selected radio button. To achive this I took the help of Javascript. I wrote javascript function that sets the values of "Primary Key" in hidden field when user clicks on any radio button. Now when user clicks on Submit button, user can get selected value froim hidden field.

 

<asp:Repeater ID="rptJobPsting" runat="server" OnItemDataBound="rptJobPsting_ItemDataBound">
<ItemTemplate>
     <table>
           <tr>
               <td valign="top">
                        <input type="radio" id="JobPosting" onclick="CheckISRMSSelectd(this.id,this.checked,'<%#Eval("PackageAmount")%>');"
name="JobPosting" value="<%#Eval("PackageID")%>" />
            </td>
         </tr>
       </table>
</ItemTemplate>
</asp:Repeater>

Fig. - 1 Repeater Control with HTML Radio Button.

 

function CheckISRMSSelectd(ControlID,Value,Amount)
{
document.getElementById(HiddenFieldName).value = Amount + " Rs";
}

Fig. - 2 Javascript functions to check selected

 

Happy Programming.