Purpose:
handled the check box check event without postback using javascript and save the id in the hidden field. in the above
“fig1” user selected the check one by one. after the selection of all the check box the header is selected which is described
in the “fig2”. now user is changed the page index described in the “fig3” and selected the page1 described in the “fig4” here all
the check box is checked.
Steps:
1) Create the Simple Web Application.
2)put the below code in the .aspx file.
<asp:HiddenField ID="TotalNoOfRecord" Value="," runat="server"/>
<asp:HiddenField ID="SelectedRecord" Value ="," runat ="server" />
"False" ID="GridView1"
runat="server" Style="z-index: 100; left: 326px; position: absolute;
top: 148px" OnRowDataBound="GridView1_RowDataBound"
AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging"
PageSize="5" CellPadding="4" ForeColor="#333333" GridLines="None">
"chkHeader" runat="server" />
"chkItemTemplate" runat="server" />
"Id" Visible="False">
"lblId" Text='' runat="server">
"Code">
"lblCode" Text='' runat="server">
"#507CD1" Font-Bold="True" ForeColor="White" />
"#EFF3FB" />
"#2461BF" ForeColor="White" HorizontalAlign="Center" />
"#D1DDF1" Font-Bold="True" ForeColor="#333333" />
"#507CD1" Font-Bold="True" ForeColor="White" />
"#2461BF" />
"White" />
3) put the below Javascript in to code.
"Javascript" type="text/javascript">
//fire when the header checkbox is click
function SelectAll(chkid)
{
//get the form
var objfrm = document.forms[0];
//find the element length of the form
for (i=0;i
{
//check the element type (it is check box) and it in the gridview1
if (objfrm.elements[i].type == "checkbox" && objfrm.elements[i].name.indexOf('') >= 0)
{
objfrm.elements[i].checked = document.getElementById(chkid).checked;
}
}
//get the hidden field of the selected id
var SelectedRecord = document.getElementById('SelectedRecord').value;
//selectedid in the hidden field
var hdnIds = SelectedRecord.split(",");
//no of record on the page
var hdnnoofrecord = document.getElementById('TotalNoOfRecord').value.split(",");
if(document.getElementById(chkid).checked)
{
//check the value in the SelectedRecord
for(var i=1;i
{
//if already exist at that time we not added that id into the
//SelectedRecord else Add
if(SelectedRecord.indexOf(',' + hdnnoofrecord[i] +',')
{
SelectedRecord += hdnnoofrecord[i] + ',';
}
}
document.getElementById('SelectedRecord').value =SelectedRecord;
}
else
{
//check the value in the SelectedRecord
for(var i=1;i
{
//unselected row id is replace (example id 1 is unchecked --> ,1, replace with ,)
SelectedRecord = SelectedRecord.replace(',' + hdnnoofrecord[i] + ',',','); ;
}
document.getElementById('SelectedRecord').value =SelectedRecord;
}
}
//header checkbox check /uncheck function
function HeaderCheckUnCheck()
{
var header =true;
var chkheaderchkbox;
var AllRecordSelect = true;
var objfrm = document.forms[0];
for (i=0;i
{
if (objfrm.elements[i].type == "checkbox" && objfrm.elements[i].name.indexOf('') >= 0)
{
if(header ==true)
{
chkheaderchkbox=objfrm.elements[i];
header =false;
}
else
{
if(objfrm.elements[i].checked ==false)
{
AllRecordSelect =false;
}
}
}
}
//all the row check box is checked then header check box is click
if(AllRecordSelect ==true)
{
chkheaderchkbox.checked =true;
}
else
{
chkheaderchkbox.checked =false;
}
}
//individual check box click at that time fire
function Select(chkid,selectedrowvalue)
{
var SelectedIds =document.getElementById('SelectedRecord').value;
if(document.getElementById(chkid).checked)
{
if(SelectedIds.indexOf(',' + selectedrowvalue + ',')
SelectedIds += selectedrowvalue + ',';
}
else
{
SelectedIds = SelectedIds.replace(',' + selectedrowvalue + ',',',');
}
document.getElementById('SelectedRecord').value = SelectedIds;
HeaderCheckUnCheck();
}
4) Here I Created one class instead of connection with database. here class is serialized because i save the data in the viewstate.
[Serializable]
public class MyData
{
private int _Id;
public int Id
{
get { return _Id; }
set { _Id = value; }
}
private String _Code;
public String Code
{
get { return _Code; }
set { _Code = value; }
}
public MyData(int id, string code)
{
this.Id = id;
this.Code = code;
}
}
5) put the below code in the .CS File.
public System.Collections.Generic.List<MyData> Data
{
get { if (ViewState["data"] ==null)
return new System.Collections.Generic.List<MyData>( );
return (System.Collections.Generic.List<MyData> ) ViewState["data"]; }
set { ViewState["data"] = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
System.Collections.Generic.List<MyData> obj = new System.Collections.Generic.List<MyData>();
for (int i = 0; i < 10; i++)
{
obj.Add(new MyData(i,"a" + i.ToString() ));
}
Data = obj;
GridView1.DataSource = Data;
GridView1.DataBind();
}
Response.Write(SelectedRecord.Value);
//Response.Write(TotalNoOfRecord.Value);
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
CheckBox chk = ((CheckBox)e.Row.FindControl("chkHeader"));
chk.Attributes.Add("onclick", "SelectAll('" + chk.ClientID + "');");
}
else if(e.Row.RowType ==DataControlRowType.DataRow)
{
CheckBox chk = ((CheckBox)e.Row.FindControl("chkItemTemplate"));
Label lbl = ((Label)e.Row.FindControl("lblId"));
chk.Attributes.Add("onclick","Select('" + chk.ClientID + "' ,'" + lbl.Text + "')");
if (SelectedRecord.Value.Contains("," + lbl.Text + ","))
{
chk.Checked = true;
}
TotalNoOfRecord.Value += lbl.Text +",";
}
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
TotalNoOfRecord.Value = ",";
GridView1.PageIndex = e.NewPageIndex;
GridView1.DataSource = Data;
GridView1.DataBind();
}
Thnx
Advertising:
Charleston Hematology Oncology Associates (CHOA) is a private practice of 7 Hematologists / Oncologists spanning well over 100 years of combined experience.Cancer Center in Charleston SC, Oncologist in Charleston SC Our physicians specialize in the diagnosis and treatment of Oncology and Hematology. Services and treatments include Medical Oncology, Hematology, Bone Densitometry, Diagnostic Testing and Clinical Research.
Vijay alone has more than 16 years of construction experience and his varied expertise includes commercial projects and residential builds, along with malls, bungalows, and township projects. Visit the Vijay Gajra project at https://www.youtube.com/channel/UCp9wqe21FPIt5sY6olUOVmw
D3 Dentistry (Dental Clinic in Mount Pleasant)- Preventative Dentistry – It’s our goal to prevent problems before they begin with regular cleanings and exams. Are you looking for Dentist, Dental Clinic, Family Dentist or Pediatric Dentist? We will carefully explain your options and customize a plan to meet your needs.
The former prosecutor, Brian Fishman, founded the Fishman Firm with the goal of providing unparalleled legal representation to individuals in Philadelphia and the surrounding counties charged with criminal offences. Criminal Lawyer, DUI Lawyer & Criminal Defense Attorney in Philadelphia Brian Fishman represents the criminally accused in Philadelphia, Montgomery, Delaware, Bucks and Chester County.
Over the last 15 years, since its inception, the group has been engaged in providing a wide range of world-class Real Estate projects to a diverse clientele. Chairman Mr. Vijay Gajra – While a local building company, the Ellora Group has a wide reach with projects in Mumbai, Gujarat, and Pune. As one of the top real estate companies in the area today, the Ellora Group is driving the industry forward across India by fostering innovation and bringing the global standards of construction.
Leave a Reply