Saturday, July 28

How to make radio buttons inside a gridview as single selection using Javascript?

In the following example I have described how to make radio buttons placed inside a gridview to work as a single selection(RadioButtonList).

Gridview:


<asp:GridView ID="grdEmployees" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Employee Name</HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblName" runat="server"Text='<%#Bind("Employee_Name") %>'></asp:Label></ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Employee Address</HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblAddress" runat="server"Text='<%#Bind("Employee_Address") %>'></asp:Label></ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Is Department Head?</HeaderTemplate>
                    <ItemTemplate>
                        <asp:RadioButton ID="rbtnDepartmentHead" runat="server"Checked='<%#Eval("Is_Department_Head") %>' />
                </asp:TemplateField>
            </Columns>
        </asp:GridView>


Then write a javascript method as written below.
Javascript Method: 


<script language="javascript" type="text/javascript">
    function SelectSingleRadiobutton(rdbtnid) {
        var rdBtn = document.getElementById(rdbtnid);
        var rdBtnList = document.getElementsByTagName("input");
        for (i = 0; i < rdBtnList.length; i++) {
            if (rdBtnList[i].type == "radio" && rdBtnList[i].id != rdBtn.id) {
                rdBtnList[i].checked = false;
            }
        }
    }
</script>

After that add "OnClick" Event to the radio button placed inside the ItemTemplate of Gridview.

<asp:RadioButton ID="rbtnDepartmentHead" runat="server"Checked='<%#Eval("Is_Department_Head") %>'
                            OnClick="javascript:SelectSingleRadiobutton(this.id)"/>

Now, the radio buttons will work as radiobuttonlist.


Thanks Shibashish Mohanty

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty