Toggle Selection Checkbox inside Grid View


In this article I'm trying to explain how to select checkbox with only one at a time inside grid view. For this I just go with Jquery with simple steps to get the result. This article will help you those who are looking for the same.

Toggle Selection Checkbox inside Grid View:



Description :


In this article I'm trying to explain how to select checkbox with only one at a time inside grid view. For this I just go with Jquery with simple steps to get the result. This article will help you those who are looking for the same.

Jquery Script :



<script type="text/javascript" language="javascript">

function CheckGrid(source) {
var isChecked = source.checked;
$("#chkGrid input[id*='chkSelect']").each(function (index) {
$(this).attr('checked', false);
});
source.checked = isChecked;

}

</script>

Source Code :



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckedGrid.aspx.cs" Inherits="ScorpCLM_UI.CheckedGrid" %>

<!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>Toggle Selection Grid</title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">

function CheckGrid(source) {
var isChecked = source.checked;
$("#chkGrid input[id*='chkSelect']").each(function (index) {
$(this).attr('checked', false);
});
source.checked = isChecked;

}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="chkGrid" runat="server">
<tr>
<td>
<asp:GridView ID="gvChk" runat="server" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None"
BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Horizontal">
<FooterStyle BackColor="gray" ForeColor="Black" />
<HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F7F7F7" />
<SortedAscendingHeaderStyle BackColor="#4B4B4B" />
<SortedDescendingCellStyle BackColor="#E5E5E5" />
<SortedDescendingHeaderStyle BackColor="#242121" />
<Columns>
<asp:TemplateField HeaderText="Check">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" onclick="CheckGrid(this);" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Id" HeaderText="Employee No" />
<asp:BoundField DataField="Name" HeaderText="Employee Name" />
<asp:BoundField DataField="Sal" HeaderText="Employee Salary" />
<asp:BoundField DataField="Designation" HeaderText="Designation" />
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>



Code Behind :



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

namespace ScorpCLM_UI
{
public partial class FixGrid : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add("Id");
dt.Columns.Add("Name");
dt.Columns.Add("Sal");
dt.Columns.Add("Designation");

DataRow dr = dt.NewRow();
dr["Id"] = 12345;
dr["Name"] = "Naveen";
dr["Sal"] = "23000";
dr["Designation"] = "Software Engineer";

DataRow dr1 = dt.NewRow();
dr1["Id"] = 12346;
dr1["Name"] = "Raj";
dr1["Sal"] = "30000";
dr1["Designation"] = "Senior Software Engineer";

DataRow dr2 = dt.NewRow();
dr2["Id"] = 12347;
dr2["Name"] = "Pawan";
dr2["Sal"] = "20000";
dr2["Designation"] = "HR";

dt.Rows.Add(dr);
dt.Rows.Add(dr1);
dt.Rows.Add(dr2);

gvFix.DataSource = dt;
gvFix.DataBind();
}
}
}
}

Output:



1

Conclusion :


This article will help you those who are looking for the same.


Article by naveensanagasetti
I hope you enjoyed to read my article, If you have any queries out of this then please post your comments.

Follow naveensanagasetti or read 139 articles authored by naveensanagasetti

Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: