Using one check box in header field select multiple check box in a DataGrid or GridView using javascript.
Java script code
<head runat="server">
<title></title>
<script type="text/javascript">
function SelectAllCheckboxes(spanChk){
// Added as ASPX uses SPAN for checkbox
var oItem = spanChk.children;
var theBox= (spanChk.type=="checkbox") ?
spanChk : spanChk.children.item[0];
xState=theBox.checked;
elm=theBox.form.elements;
for(i=0;i<elm.length;i++)
if(elm[i].type=="checkbox" &&
elm[i].id!=theBox.id)
{
//elm[i].click();
if(elm[i].checked!=xState)
elm[i].click();
//elm[i].checked=xState;
}
}
</script>
then add a HTML Check box in header field as below
<asp:TemplateColumn HeaderText="Select">
<HeaderTemplate>
<input id="chkAll" onclick="javascript:SelectAllCheckboxes(this);"
runat="server" type="checkbox" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
Complete code here:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function SelectAllCheckboxes(spanChk){
// Added as ASPX uses SPAN for checkbox
var oItem = spanChk.children;
var theBox= (spanChk.type=="checkbox") ?
spanChk : spanChk.children.item[0];
xState=theBox.checked;
elm=theBox.form.elements;
for(i=0;i<elm.length;i++)
if(elm[i].type=="checkbox" &&
elm[i].id!=theBox.id)
{
//elm[i].click();
if(elm[i].checked!=xState)
elm[i].click();
//elm[i].checked=xState;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataGrid ID="DG1" runat="server" BackColor="White" BorderColor="White"
BorderStyle="Ridge" BorderWidth="2px"
CellPadding="3" CellSpacing="1" GridLines="None" Height="152px"
Width="541px" AutoGenerateColumns="False" >
<Columns>
<asp:BoundColumn DataField="emp_id"
HeaderText="Emp Id" ReadOnly="True"></asp:BoundColumn>
<asp:BoundColumn DataField="emp_name" HeaderText="Emp Name">
</asp:BoundColumn>
<asp:BoundColumn DataField="phone"
HeaderText="Phone"></asp:BoundColumn>
<asp:BoundColumn DataField="salary"
HeaderText="Salary"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="Select">
<HeaderTemplate>
<input id="chkAll" onclick="javascript:SelectAllCheckboxes(this);"
runat="server" type="checkbox" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
<FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />
<ItemStyle BackColor="#DEDFDE" ForeColor="Black" />
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
<SelectedItemStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
</asp:DataGrid>
</div>
</form>
</body>
</html>
.cs code:
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ToString());
SqlCommand cmd;
SqlDataAdapter da;
DataSet ds = new DataSet();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
grid_bind();
}
}
public void grid_bind()
{
try
{
con.Open();
//string str = "skgridview1_ins";
da = new SqlDataAdapter("select *from skgridview1", con);
da.Fill(ds);
DG1.DataSource = ds;
DG1.DataBind();
con.Close();
}
catch (Exception ex)
{
throw ex;
}
}
Delete record in DataGrid or GridView using check box selecting one or multiple values
protected void btn_delete_Click(object sender, EventArgs e)
{
// Looping through all the rows in the GridView
foreach (GridViewRow row in GV1.Rows)
{
CheckBox checkbox = (CheckBox)row.FindControl("cbRows");
//Check if the checkbox is checked.
//value in the HtmlInputCheckBox's Value property is set as the //value of the delete command's parameter.
if (checkbox.Checked)
{
// Retreive the Employee ID
int employeeID = Convert.ToInt32(GV1.DataKeys[row.RowIndex].Value);
// Pass the value of the selected Employye ID to the Delete //command.
string id="delete from skgridview1 where emp_id="+employeeID+"";
cmd = new SqlCommand(id,con);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
grid_bind();
}
</head>
Demo
Emp Id | Emp Name | Phone | Salary | |
---|---|---|---|---|
57 | reeta | 8965278415 | 25500.0000 | |
58 | reeta | 8965278415 | 25500.0000 | |
73 | ram | 4598562105 | 25000.0000 | |
74 | ram | 4598562105 | 25000.0000 | |
75 | ram | 4598562105 | 25000.0000 | |
76 | ram | 4598562105 | 25000.0000 | |
77 | ram | 4598562105 | 25000.0000 | |
78 | ram | 4598562105 | 25000.0000 | |
79 | ram | 4598562105 | 25000.0000 | |
80 | ram | 4598562105 | 25000.0000 | |
81 | ram | 4598562105 | 25000.0000 | |
82 | shyam | 4578562105 | 30000.0000 | |
83 | shyam | 4578562105 | 30000.0000 | |
84 | shyam | 4578562105 | 30000.0000 | |
85 | shyam | 4578562105 | 30000.0000 | |
86 | shyam | 4578562105 | 30000.0000 | |
87 | shyam | 4578562105 | 30000.0000 | |
No comments:
Post a Comment