Checkbox inside GridView like Gmail

Even Users want to Check all of the Gridview CheckBox Column for some desired task like Delete, Select Records in GridView. In this Article I am going to describe CheckBox inside Gridview and functionality to check all checkbox in Gridview like Gmail.

I am using JavaScript to Check/UnCheck all CheckBox in GridView. I am using a sample example of Employee Record in Grid to delete the records.

There is a table Employee which I have used in the sample code.

Create Table Employee
(
    Emp_ID int identity(1,1),
    Emp_Name varchar(50),
   Salary money
)

ASPX CODE

<script type="text/javascript">
function SelectAllCheckboxes(chk)
{
    if(chk.type=="checkbox")
       var a=chk;
    State=a.checked;
    elm=a.form.elements;
    for(i=0;i<elm.length;i++)
       if(elm[i].type=="checkbox")
       {     
          if(elm[i].checked!=State)
            elm[i].click();
          else if(elm[i].checked==State)
            elm[i].click();      
       }
}

    </script>

<asp:Button ID="b1" runat="server" Text="DeleteAll" OnClick="b1_Click" />
<br/>

        <asp:GridView ID="GridView1" runat="server" AllowPaging="true" AutoGenerateColumns="false"
            DataKeyNames="Emp_ID" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDeleting="GridView1_RowDeleting">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <input type="checkbox" id="chkAll" runat="server" onclick="javascript:SelectAllCheckboxes(this)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <input type="checkbox" id="chkSelect" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="Emp_ID" Visible="false" />
                <asp:TemplateField HeaderText="Employee ID">
                    <ItemTemplate>
                        <asp:Label ID="l1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Emp_ID")%>'>
                        </asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="t1" runat="server" ReadOnly="true" Text='<%DataBinder.Eval(Container.DataItem,"Emp_ID")%>'>
                        </asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Employee Name">
                    <ItemTemplate>
                        <asp:Label ID="l2" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Emp_Name")%>'>
                        </asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="t2" runat="server" Text='<%DataBinder.Eval(Container.DataItem,"Emp_Name")%>'>
                        </asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Salary">
                    <ItemTemplate>
                        <asp:Label ID="l3" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"salary")%>'>
                        </asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="t3" runat="server" Text='<%DataBinder.Eval(Container.DataItem,"salary")%>'>
                        </asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:CommandField ShowDeleteButton="true" DeleteText="Delete" HeaderText="DELETE" />
            </Columns>
        </asp:GridView>

ASPX.CS CODE

SqlConnection con = new SqlConnection("server=NEERAJ-PC;database=neeraj;uid=sa;pwd=sa");
    SqlCommand cmd;
    SqlDataAdapter da;
    DataSet ds;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            display();
    }
    public void display()
    {
        da = new SqlDataAdapter("select * from Employee", con);
        ds = new DataSet();
        da.Fill(ds);
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        display();
    }
    protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
    {
        bool isChecked = ((HtmlInputCheckBox)GridView1.Rows[e.RowIndex].FindControl("chkSelect")).Checked;
        if (isChecked)
        {
            string Emp_ID = ((Label)GridView1.Rows[e.RowIndex].FindControl("l1")).Text;
            int id = int.Parse(Emp_ID);
            cmd = new SqlCommand("delete from Employee where Emp_ID=" + id, con);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
            GridView1.EditIndex = -1;
            display();
        }
    }
    protected void b1_Click(object sender, EventArgs e)
    {
        string ids = "";
        ids = GetSelectedIds();
        con.Open();
        SqlCommand cmd = new SqlCommand("delete from Employee where Emp_ID in(" + ids + ")", con);
        cmd.ExecuteNonQuery();
        display();

    }
    private string GetSelectedIds()
    {
        string ids = "";
        for (int i = 0; i < GridView1.Rows.Count; i++)
        {
            GridViewRow row = GridView1.Rows[i];
            bool isChecked = ((HtmlInputCheckBox)row.FindControl
                ("chkSelect")).Checked;
            if (isChecked)
            {
                string s = ((Label)row.FindControl("l1")).Text;
                ids = ids + s + ",";
            }

        }
        return ids.Substring(0, ids.Length - 1);
    }

Now run the application and see the result as given below image





Powered by/ refrence from: http://www.dotnetfactor.com/Article/checkbox-inside-gridview-like-gmail-22.aspx