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: b>
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:
Conclusion :
This article will help you those who are looking for the same.