Wednesday, March 16, 2011

Use Check Box In Gridview In Asp.net C#

In Aspx .Page Take Grid view Like Below

<head runat="server">
    <title>Grid CheckBox</title>
  
    <script type="text/javascript">
        function SelectAll(id)
        {
            //get reference of GridView control
            var grid = document.getElementById("<%= GridView1.ClientID %>");
            //variable to contain the cell of the grid
            var cell;
           
            if (grid.rows.length > 0)
            {
                //loop starts from 1. rows[0] points to the header.
                for (i=1; i<grid.rows.length; i++)
                {
                    //get the reference of first column
                    cell = grid.rows[i].cells[0];
                   
                    //loop according to the number of childNodes in the cell
                    for (j=0; j<cell.childNodes.length; j++)
                    {          
                        //if childNode type is CheckBox                
                        if (cell.childNodes[j].type =="checkbox")
                        {
                        //assign the status of the Select All checkbox to the cell checkbox within the grid
                            cell.childNodes[j].checked = document.getElementById(id).checked;
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">
            <Columns>
                <asp:TemplateField>
                    <AlternatingItemTemplate>
                        <asp:CheckBox ID="cbSelectAll" runat="server" />
                    </AlternatingItemTemplate>
                    <HeaderTemplate>
                        <asp:CheckBox ID="cbSelectAll" runat="server" Text="Select All" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="cbSelectAll" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="ApplicationName" HeaderText="Application Name" />
                <asp:BoundField DataField="ServerName" HeaderText="Server Name" />
            </Columns>
        </asp:GridView>
   
    </div>
    </form>
</body>
In Aspx.Cs Page Use this Code

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //Binding GridView with the datasource
            this.GridView1.DataSource = FillDataTable();
            this.GridView1.DataBind();
        }
    }

    /// <summary>
    /// Method that will add few rows in a DataTable and returns a DataTable
    /// </summary>
    /// <returns>DataTable</returns>
    protected DataTable FillDataTable()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ApplicationID");
        dt.Columns.Add("ApplicationName");
        dt.Columns.Add("ServerName");

        DataRow dr = dt.NewRow();
        dr[0] = "1";
        dr[1] = "Application 1";
        dr[2] = "Server 1";
        dt.Rows.Add(dr);

        DataRow dr1 = dt.NewRow();
        dr1[0] = "2";
        dr1[1] = "Application 2";
        dr1[2] = "Server 2";
        dt.Rows.Add(dr1);

        DataRow dr2 = dt.NewRow();
        dr2[0] = "3";
        dr2[1] = "Application 3";
        dr2[2] = "Server 3";
        dt.Rows.Add(dr2);

        DataRow dr3  = dt.NewRow();
        dr3[0] = "4";
        dr3[1] = "Application 4";
        dr3[2] = "Server 4";
        dt.Rows.Add(dr3);

        DataRow dr4 = dt.NewRow();
        dr4[0] = "5";
        dr4[1] = "Application 5";
        dr4[2] = "Server 5";
        dt.Rows.Add(dr4);

        DataRow dr5 = dt.NewRow();
        dr5[0] = "6";
        dr5[1] = "Application 6";
        dr5[2] = "Server 6";
        dt.Rows.Add(dr5);

        return dt;
    }
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            //Find the checkbox control in header and add an attribute
            ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" + ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "')");
        }
    }
}
By at
Labels: ,