Selecting All CheckBoxes in GridView


This article will contain code that is used to Check / Uncheck checkbox in Gridview.

javascript on the page is :

<script type="text/javascript">

    var TotalChkBx;

    var Counter;

    window.onload = function()

    {

        //Get total no. of CheckBoxes in side the GridView.

        TotalChkBx = parseInt('<%= this.gvCheckboxes.Rows.Count %>');

        //Get total no. of checked CheckBoxes in side the GridView.

        Counter = 0;

    }

    function HeaderClick(CheckBox)

    {

        //Get target base & child control.

        var TargetBaseControl = document.getElementById('<%= this.gvCheckboxes.ClientID %>');

        var TargetChildControl = "chkBxSelect";

 

        //Get all the control of the type INPUT in the base control.

        var Inputs = TargetBaseControl.getElementsByTagName("input");

 

        //Checked/Unchecked all the checkBoxes in side the GridView.

        for(var n = 0; n < Inputs.length; ++n)

            if(Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl,0) >= 0)

                Inputs[n].checked = CheckBox.checked;

        //Reset Counter

        Counter = CheckBox.checked ? TotalChkBx : 0;

    }

    function ChildClick(CheckBox, HCheckBox)

    {

        //get target base & child control.

        var HeaderCheckBox = document.getElementById(HCheckBox);

 

        //Modifiy Counter;

        if(CheckBox.checked && Counter < TotalChkBx)

            Counter++;

        else if(Counter > 0)

            Counter--;

 

        //Change state of the header CheckBox.

        if(Counter < TotalChkBx)

            HeaderCheckBox.checked = false;

        else if(Counter == TotalChkBx)

            HeaderCheckBox.checked = true;

    }

</script>

Html Code on the Page is :

<asp:GridView ID="gvCheckboxes" runat="server" AutoGenerateColumns="False" OnRowCreated="gvCheckboxes_RowCreated">

    <Columns>

        <asp:BoundField HeaderText="S.N." DataField="sno">

            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />

            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />

        </asp:BoundField>

        <asp:TemplateField HeaderText="Select">

            <ItemTemplate>

                <asp:CheckBox ID="chkBxSelect" runat="server" />

            </ItemTemplate>

            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />

            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />

            <HeaderTemplate>

                <asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />

            </HeaderTemplate>

        </asp:TemplateField>

        <asp:TemplateField>

            <ItemTemplate>

                <asp:CheckBox ID="chkBx" runat="server" />

            </ItemTemplate>

            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />

        </asp:TemplateField>

    </Columns>

    <RowStyle BackColor="Moccasin" />

    <AlternatingRowStyle BackColor="NavajoWhite" />

    <HeaderStyle BackColor="DarkOrange" Font-Bold="True" ForeColor="White" />

</asp:GridView>

Code Behind code :

protected void Page_Load(object sender, EventArgs e)

{

    if (!IsPostBack)

    {

        BindGridView();

    }

}

 

protected void BindGridView()

{

    gvCheckboxes.DataSource = GetDataSource();

    gvCheckboxes.DataBind();

}

 

protected DataTable GetDataSource()

{

    DataTable dTable = new DataTable();

    DataRow dRow = null;

    Random rnd = new Random();

    dTable.Columns.Add("sno");

 

    for (int n = 0; n < 10; ++n)

    {

        dRow = dTable.NewRow();

 

        dRow["sno"] = n + ".";

 

        dTable.Rows.Add(dRow);

        dTable.AcceptChanges();

    }

 

    return dTable;

}

 

protected void gvCheckboxes_RowCreated(object sender, GridViewRowEventArgs e)

{

    if (e.Row.RowType == DataControlRowType.DataRow && (e.Row.RowState ==

 

    DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate))

    {

        CheckBox chkBxSelect = (CheckBox)e.Row.Cells[1].FindControl("chkBxSelect");

        CheckBox chkBxHeader = (CheckBox)this.gvCheckboxes.HeaderRow.FindControl("chkBxHeader");

 

        chkBxSelect.Attributes["onclick"] = string.Format("javascript:ChildClick(this,'{0}');",

 

        chkBxHeader.ClientID);

    }

}

Advertisements

2 thoughts on “Selecting All CheckBoxes in GridView

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s