Select one RadioButton at a Time in GridView Row using JQuery
There are situations where we need to allow users to make single row selection in GridView using RadioButton. By default, when we have a RadioButton in GridView TemplateColumn it will allow selection of RadioButton in every row. To select a single row, we need to write some JavaScript functions that can clear the selection of other rows if already selected and persists the current row selection.
Read the following article that discusses the subject using JavaScript,
GridView with RadioButton - Select One at a Time
This little article will help us to do the same with the new JQuery library. Read my article, Using JQuery in ASP.Net AJAX Applications - Part 1 to set up and work with JQuery.
The below code will help us in achieving the same with JQuery.
ASPX Code
<script src="_scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script language="javascript">
function CheckOtherIsCheckedByGVID(rdb) {
$("#<%=gvUsers.ClientID %> > TBODY > tr > td >input[type:radio]").filter(function() {
return (this != rdb);
}).attr("checked", "");
}
</script>
<asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#010101" BorderStyle="Groove" BorderWidth="1px" CellPadding="4">
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:RadioButton ID="rdbGVRow" onclick="javascript:CheckOtherIsCheckedByGVID(this);" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Email" HeaderText="Email" ReadOnly="True" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" ReadOnly="True" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" ReadOnly="True" />
</Columns>
<FooterStyle BackColor="White" ForeColor="#330099" />
<RowStyle BackColor="White" ForeColor="#330099" />
<HeaderStyle BackColor="#F06300" Font-Bold="True" ForeColor="#FFFFCC" />
</asp:GridView>
CodeBehind
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
BindUsers();
}
public void BindUsers()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Sql"].ConnectionString);
SqlCommand com = new SqlCommand("SP_GetUsersForModeration", con);
com.CommandType = CommandType.StoredProcedure;
SqlDataAdapter ada = new SqlDataAdapter(com);
DataTable dt = new DataTable();
ada.Fill(dt);
gvUsers.DataSource = dt;
gvUsers.DataBind();
}
The above codesnippet will clear the selection of RadioButton in other rows if already selected leaving the current row selection.
Suppose, if we have RadioButton in other columns for different purpose the above code will clear those RadioButton selections too. Read the article GridView with RadioButton - Select One at a Time
to know more about this problem. To clear the selection based on a particular column, we can change the above code a bit to select the RadioButton in particular column. The below code will clear the RadioButton in the first column of every row.
<script language="javascript">
function CheckOtherIsCheckedByGVID(rdb) {
$("#<%=gvUsers.ClientID %> > TBODY > tr > td:first-child >input[type:radio]").filter(function() {
return (this != rdb);
}).attr("checked", "");
}
</script>
If the RadioButton is in the last column, use "last-child". If it is in nth column use "nth-child(n)", replace n with column number in the argument.
|