ASPX HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultipleCheckBoxMultipleGridSelectionOnSinglePage.aspx.cs"
Inherits="MultipleCheckBoxMultipleGridSelectionOnSinglePage" %>
<!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 language="javascript" type="text/javascript" src="JQuery.js"></script>
<style>
body{font-family:Arial;}
table{border:1px solid #888;width:200px;}
td{font-size:15px;border:1px solid #efefef; border-collapse:collapse;padding:5px;}
.trheader{background:#000;color:#fff;font-weight:bold;}
</style>
<script language="javascript" type="text/javascript">
//Document ready function to bind all the actions
$(document).ready(function() {
//Find all the main checkbox and assign an event
$("span[ChkType='MAIN']").click(function() {
//Get the TAG and Values
var TAG = $(this).attr("TAG");
var IsChecked = $(this).find("input[type='checkbox']").attr("checked");
//Bind the list
$("span[ChkType='SELECT'][TAG='" + TAG + "']").find("input[type='checkbox']").attr("checked", IsChecked);
});
//The other checkboxes with SELECT as Type
$("span[ChkType='SELECT']").click(function() {
//Get the TAG and Values
var TAG = $(this).attr("TAG");
var IsChecked = ($("span[ChkType='SELECT'][TAG='" + TAG + "']").find("[checked='true']").length == $("span[ChkType='SELECT'][TAG='" + TAG + "']").length);
//Bind the list
$("span[ChkType='MAIN'][TAG='" + TAG + "']").find("input[type='checkbox']").attr("checked", IsChecked);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>Multiple Checkbox Selection With Mutiple Grid on Single Page</h1>
<asp:Repeater ID="rptList1" runat="server">
<HeaderTemplate>
<table cellpadding="0" cellspacing="0" border="0">
<tr class="trheader">
<td align="center">
<asp:CheckBox ID="chkMain" runat="server" ChkType='MAIN' TAG='LIST-1' />
</td>
<td align="center">
<b>List 1</b>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td align="center">
<asp:CheckBox ID="chkSelect" runat="server" ChkType='SELECT' TAG='LIST-1' />
</td>
<td>
<%#Eval("Name") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<br /><br />
<asp:Repeater ID="rptList2" runat="server">
<HeaderTemplate>
<table cellpadding="0" cellspacing="0" border="0">
<tr class="trheader">
<td align="center">
<asp:CheckBox ID="chkMain" runat="server" ChkType='MAIN' TAG='LIST-2' />
</td>
<td align="center">
<b>List 2</b>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td align="center">
<asp:CheckBox ID="chkSelect" runat="server" ChkType='SELECT' TAG='LIST-2' />
</td>
<td>
<%#Eval("Name") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<br /><br />
<asp:Repeater ID="rptList3" runat="server">
<HeaderTemplate>
<table cellpadding="0" cellspacing="0" border="0">
<tr class="trheader">
<td align="center">
<asp:CheckBox ID="chkMain" runat="server" ChkType='MAIN' TAG='LIST-3' />
</td>
<td align="center">
<b>List 3</b>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td align="center">
<asp:CheckBox ID="chkSelect" runat="server" ChkType='SELECT' TAG='LIST-3' />
</td>
<td>
<%#Eval("Name") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
C# Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class MultipleCheckBoxMultipleGridSelectionOnSinglePage : System.Web.UI.Page
{
private IList<BindListClass> BindList
{
get
{
IList<BindListClass> obj = new List<BindListClass>();
obj.Add(new BindListClass() { Id = 1, Name = "James Bond" });
obj.Add(new BindListClass() { Id = 2, Name = "Bruce Wayne" });
obj.Add(new BindListClass() { Id = 3, Name = "Peter Parker" });
obj.Add(new BindListClass() { Id = 4, Name = "Tonk Stark" });
obj.Add(new BindListClass() { Id = 5, Name = "Ethen Hunt" });
return obj;
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//Bind List 1
rptList1.DataSource = BindList;
rptList1.DataBind();
//Bind List 2
rptList2.DataSource = BindList;
rptList2.DataBind();
//Bind List 3
rptList3.DataSource = BindList;
rptList3.DataBind();
}
}
}
public class BindListClass
{
public int Id { get; set; }
public string Name { get; set; }
}
Final Preview of the Screen
No comments:
Post a Comment