Post
Ask Question

OnCheckedChanged Event of CheckBox Control in ASP.Net

Introduction
 
This article explains the "OnCheckedChanged" event of the GridView control. The OnCheckedChanged event occurs when the checked state of the Checkbox control changes.
 
OnCheckedChanged Event
 
The OnCheckedChanged event handler of the ASP.Net Checkbox control allows us to handle the click event of a checkbox at the server side that is raised when the user clicks the checkbox control to changes it checked state. The "CheckedChanged" event occurs only if the "AutoPostBack" property of the checkbox control is "true".
  1. <asp:CheckBox ID="chkSelect" runat="server" AutoPostBack="true" OnCheckedChanged="ChckedChanged" />  
The OnCheckedChanged method also allows derived classes to handle the event without attaching a delegate
 
Now  I will show you how to use the OnCheckedChanged Event in a GridView. Use the following procedure to do that.
 
Create DataBase and Table in SQL Server
  1. Create Database Employee  
  2. use Employee  
  3. create table EmployeeInformation  
  4. (  
  5. EmpId int,  
  6. Emp_Name varchar(max),  
  7. Emp_Address nvarchar(max),  
  8. Emp_Department varchar(max)  
  9. )
Write the following procedure to insert the values into table columns:
  1. insert into EmployeeInformation values(101,'Pankaj Lohani','A-43 Vinod New Delhi','Web Development')  
  2. insert into EmployeeInformation values(102,'Nimit Joshi','B-44 Laxminagar New Delhi','Web Development')  
  3. insert into EmployeeInformation values(103,'Pravesh Khanduri','C-45 Pratap Vihar New Delhi','Teacher')  
  4. insert into EmployeeInformation values(104,'Amit Senwal','D-46 R.K puram New Delhi','Web Development')  
  5. insert into EmployeeInformation values(105,'Ravi Kumar','E-47 Saket New Delhi','Testing')  
  6. insert into EmployeeInformation values(106,'Ainul Hasan','F-48 Saraswati Kunj New Delhi','Web Development')  
  7. insert into EmployeeInformation values(107,'Ashish','F-49 Vinod Nagar New Delhi','Software Engineer')  
Write the following query to execute the table schema:
  1. select * from EmployeeInformation
 
 TalbeSchema
 
Step 1
 
Open Visual Studio then select "Create New Website" --> "ASP.NET Web Site".
 
CreateNewWebsite
 
Step 2
 
Now go to the Solution Explorer to the right side of the application and use the procedure shown in the following figure
 
AddNewItem
 
Step 3
 
Add a new Web form in the empty web application as shown in the following figure
 
AddNewForm
 
Write the following code in a GridForm.aspx page
 
Step 4
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridForm.aspx.cs" Inherits="GridForm" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.  <form id="form1" runat="server">  
  9.  <div>  
  10. <asp:GridView ID="gvEmpInfo" AutoGenerateColumns="False" CellPadding="4" runat="server"   
  11. BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px">  
  12. <Columns>  
  13. <asp:TemplateField>  
  14. <ItemTemplate>  
  15. <asp:CheckBox ID="chkbox" runat="server" AutoPostBack="true" OnCheckedChanged="ChckedChanged" />  
  16. </ItemTemplate>  
  17. </asp:TemplateField>  
  18. <asp:BoundField HeaderText="EmpId" DataField="EmpId" />  
  19. <asp:BoundField HeaderText="EmpName" DataField="Emp_Name" />  
  20. <asp:BoundField HeaderText="EmpAddress" DataField="Emp_Address" />  
  21. <asp:BoundField HeaderText="EmpDept" DataField="Emp_Department" />  
  22. </Columns>  
  23.        <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />  
  24. <HeaderStyle BackColor="#003399" Font-Bold="true" ForeColor="#CCCCFF" />  
  25.        <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />  
  26.        <RowStyle BackColor="White" ForeColor="#003399" />  
  27.        <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />  
  28.        <SortedAscendingCellStyle BackColor="#EDF6F6" />  
  29.        <SortedAscendingHeaderStyle BackColor="#0D4AC4" />  
  30.        <SortedDescendingCellStyle BackColor="#D6DFDF" />  
  31.        <SortedDescendingHeaderStyle BackColor="#002876" />  
  32. </asp:GridView>  
  33. <br />  
  34. <b>OnCheckedChanged Event Fired on Gridview</b>  
  35. <asp:GridView ID="gvMovedRows" AutoGenerateColumns="False" CellPadding="4" runat="server" ForeColor="#333333" GridLines="None">  
  36.     <AlternatingRowStyle BackColor="White" ForeColor="#284775" />  
  37. <Columns>  
  38. <asp:BoundField HeaderText="EmpId" DataField="EmpId" />  
  39. <asp:BoundField HeaderText="EmpName" DataField="Emp_Name" />  
  40. <asp:BoundField HeaderText="EmpAddress" DataField="Emp_Address" />  
  41. <asp:BoundField HeaderText="EmpDept" DataField="Emp_Department" />  
  42. </Columns>  
  43.     <EditRowStyle BackColor="#999999" />  
  44.     <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />  
  45. <HeaderStyle BackColor="#5D7B9D" Font-Bold="true" ForeColor="White" />  
  46.     <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />  
  47.     <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />  
  48.     <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />  
  49.     <SortedAscendingCellStyle BackColor="#E9E7E2" />  
  50.     <SortedAscendingHeaderStyle BackColor="#506C8C" />  
  51.     <SortedDescendingCellStyle BackColor="#FFFDF8" />  
  52.     <SortedDescendingHeaderStyle BackColor="#6F8DAE" />  
  53. </asp:GridView>  
  54.   </div>  
  55.   </form>  
  56. </body>  
  57. </html>   
Design View of GridForm.aspx
 
DesignView
 
Now write the following code in "GridForm.aspx.cs":
 
Step 4
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Data;  
  6. using System.Data.SqlClient;  
  7. using System.Web.UI;  
  8. using System.Web.UI.WebControls;  
  9. public partial class GridForm : System.Web.UI.Page  
  10. {  
  11.     SqlConnection con;  
  12.     SqlDataAdapter adap;  
  13.     DataTable dt;  
  14.     protected void Page_Load(object sender, EventArgs e)  
  15.     {  
  16.         if (!IsPostBack)  
  17.         {  
  18.             BindGridview();  
  19.         }  
  20.     }  
  21.     public GridForm()  
  22.     {  
  23.         con = new SqlConnection(@"Data Source=.;Initial Catalog=Employee;User ID=;Password=");  
  24.     }  
  25.     protected void BindGridview()  
  26.     {  
  27.         adap = new SqlDataAdapter("select * from EmployeeInformation", con);  
  28.         dt = new DataTable();  
  29.         adap.Fill(dt);  
  30.         gvEmpInfo.DataSource = dt;  
  31.         gvEmpInfo.DataBind();  
  32.     }  
  33.     protected void ChckedChanged(object sender, EventArgs e)  
  34.     {  
  35.         GetSelectedRows();  
  36.         BindSecondGrid();  
  37.     }  
  38.     protected void BindSecondGrid()  
  39.     {  
  40.         DataTable dt = (DataTable)ViewState["EmpDetails"];  
  41.         gvMovedRows.DataSource = dt;  
  42.         gvMovedRows.DataBind();  
  43.     }  
  44.     private void GetSelectedRows()  
  45.     {  
  46.         DataTable dt;  
  47.         if (ViewState["EmpDetails"] != null)  
  48.         dt = (DataTable)ViewState["EmpDetails"];  
  49.         else  
  50.         dt = CreateTable();  
  51.         for (int i = 0; i < gvEmpInfo.Rows.Count; i++)  
  52.         {  
  53.             CheckBox chk = (CheckBox)gvEmpInfo.Rows[i].Cells[0].FindControl("chkbox");  
  54.             if (chk.Checked)  
  55.             {  
  56.                 dt = MoveRows(gvEmpInfo.Rows[i], dt);  
  57.             }  
  58.             else  
  59.             {  
  60.                 dt = RemoveRow(gvEmpInfo.Rows[i], dt);  
  61.             }  
  62.         }  
  63.         ViewState["EmpDetails"] = dt;  
  64.     }  
  65.     private DataTable CreateTable()  
  66.     {  
  67.         DataTable dt = new DataTable();  
  68.         dt.Columns.Add("EmpId");  
  69.         dt.Columns.Add("Emp_Name");  
  70.         dt.Columns.Add("Emp_Address");  
  71.         dt.Columns.Add("Emp_Department");  
  72.         dt.AcceptChanges();  
  73.         return dt;  
  74.     }  
  75.     private DataTable MoveRows(GridViewRow gvRow, DataTable dt)  
  76.     {  
  77.         DataRow[] dr = dt.Select("EmpId = '" + gvRow.Cells[1].Text + "'");  
  78.         if (dr.Length <= 0)  
  79.         {  
  80.             dt.Rows.Add();  
  81.             int rowscount = dt.Rows.Count - 1;  
  82.             dt.Rows[rowscount]["EmpId"] = gvRow.Cells[1].Text;  
  83.             dt.Rows[rowscount]["Emp_Name"] = gvRow.Cells[2].Text;  
  84.             dt.Rows[rowscount]["Emp_Address"] = gvRow.Cells[3].Text;  
  85.             dt.Rows[rowscount]["Emp_Department"] = gvRow.Cells[4].Text;  
  86.             dt.AcceptChanges();  
  87.         }  
  88.         return dt;  
  89.     }  
  90.     private DataTable RemoveRow(GridViewRow gvRow, DataTable dt)  
  91.     {  
  92.         DataRow[] dr = dt.Select("EmpId = '" + gvRow.Cells[1].Text + "'");  
  93.         if (dr.Length > 0)  
  94.         {  
  95.             dt.Rows.Remove(dr[0]);  
  96.             dt.AcceptChanges();  
  97.         }  
  98.         return dt;  
  99.     }  
  100. }
Step 5
 
Debug the application by pressing F5 to execute the Web form. After debugging the application the output will be as in the following figure
 
AfterDebug
 
Step 6
 
Now check the rows to move to another GirdView as shown in the following figure
 
MoveRows
 
Step 7
 
If you will uncheck the rows then the moved rows will disappear from the GridView as shown in the following figure
 
RemoveRows
 
Summary
 
The OnChckedChanged event occurs when the checked state of the checkbox control changes and it submits the web form to the server if the AutoPostBack property is true.


Similar Articles