Menu ▼



Posted By :
avatarmrkraju
Total Views : 1836

Allow only single radio button selection in asp.net gridview

Radio buttons are used to allow user to select a single option among multiple. But if we use radio button in gridview rows, user can select multiple rows (radio buttons) even though you mention radio button group for the radio buttons it will not restrict the user to select only one row. To restrict user to select only one row(radio button) we can write a javascript function (jquery) on radio button click event below example will let you know how to do that.

Example

SelectPlanPrice
Silver100
Gold200
Dimond300

Javascript/jQuery function

<script language="javascript">
    function singleRbtnSelect(chb) {
        $(chb).closest("table").find("input:radio").prop("checked", false);
        $(chb).prop("checked", true);
    }
</script>

ASPX Page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script language="javascript">
        function singleRbtnSelect(chb) {
            $(chb).closest("table").find("input:radio").prop("checked", false);
            $(chb).prop("checked", true);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="gvPlans" runat="server" AutoGenerateColumns="False" BackColor="White"
            BorderColor="#3366CC" BorderWidth="1px" CellPadding="4">
            <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
            <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
            <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
            <RowStyle BackColor="White" ForeColor="#003399" />
            <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
            <SortedAscendingCellStyle BackColor="#EDF6F6" />
            <SortedAscendingHeaderStyle BackColor="#0D4AC4" />
            <SortedDescendingCellStyle BackColor="#D6DFDF" />
            <SortedDescendingHeaderStyle BackColor="#002876" />
            <Columns>
                <asp:TemplateField HeaderText="Select">
                    <ItemTemplate>
                        <asp:RadioButton ID="rbtnPlan" runat="server" onclick="singleRbtnSelect(this);" />
                        <asp:HiddenField ID="hidPlanID" runat="server" Value='<%#Eval("PlanID")%>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="Plan" DataField="Plan" ItemStyle-Width="200">
                    <ItemStyle Width="200px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderText="Price" DataField="Price" ItemStyle-Width="200">
                    <ItemStyle Width="200px"></ItemStyle>
                </asp:BoundField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

CS page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("PlanID", typeof(int));
        dt.Columns.Add("Plan", typeof(string));
        dt.Columns.Add("Price", typeof(decimal));
        dt.Rows.Add(1, "Silver", 100);
        dt.Rows.Add(2, "Gold", 200);
        dt.Rows.Add(3, "Dimond", 300);
        gvPlans.DataSource = dt;
        gvPlans.DataBind();
    }
    
}






comments powered by Disqus


Search dotnetlearners.com