Sunday, 20 May 2012

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 IdEmp NamePhoneSalary
57reeta896527841525500.0000
58reeta896527841525500.0000
73ram459856210525000.0000
74ram459856210525000.0000
75ram459856210525000.0000
76ram459856210525000.0000
77ram459856210525000.0000
78ram459856210525000.0000
79ram459856210525000.0000
80ram459856210525000.0000
81ram459856210525000.0000
82shyam457856210530000.0000
83shyam457856210530000.0000
84shyam457856210530000.0000
85shyam457856210530000.0000
86shyam457856210530000.0000
87shyam457856210530000.0000
     

No comments:

Post a Comment