Ramani Sandeep's Blog

DotNetting – Fast , Easy Way of Developing Applications

Posts Tagged ‘Selecting All CheckBoxes in GridView’

Selecting All CheckBoxes in GridView

Posted by Ramani Sandeep on July 19, 2008

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);

    }

}

Posted in ASP.NET, C# 2.0, JavaScript | Tagged: , | 2 Comments »

 
Follow

Get every new post delivered to your Inbox.

Join 317 other followers