Checkbox in ASP.NET GridView

Using Checkbox in ASP.NET GridView Control:

You can add a Check Box control inside a asp.net GridView by using TemplateField.here we define one checkbox with id “chkbxSelect”.

       <ItemTemplate>

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

            </ItemTemplate>

 Check box in GridView header Control:

You can also insect a check box in header template in grid.This is use to find control on all rows check box.

By define user define coloms in gridview control.

<asp:TemplateField HeaderText="Select">

   <ItemTemplate>

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

   </ItemTemplate>

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

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

  <HeaderTemplate>

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

  </HeaderTemplate>

 </asp:TemplateField>

Access header Checkbox in GridView Using JavaScript :

Add a header checkbox in gridview header template and try to do select/deselect all rows by using Header checkbox. Basically this is use as a control for other row’s check box. Many times developer need this type of code and control it at client site.

JavaScript (Window.onload ) for selecting All check box in GridView

<script type="text/javascript">

        var TotalChkBx;

        var Counter;

        window.onload = function () {

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

            TotalChkBx = parseInt('<%= this.Grid_All.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.Grid_All.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>

    

Header check box in Gridview

Download Example code 

Other Post :

• how-to-to-set-date-format-
• how-to-set-current-data-into-asp-text.
• web-services-in-asp.net-programming.
• declare-pointer-in-asp.net-programming.
• data-type-in-c-with-asp.net-programming.
• introduction-of-c-c sharp-also-know-asc.

Gridview Related Post:

• How to Bind gridview form database.
• Show gridview Row Details in Asp.net.
• Template field in gridview asp.net Example
• Introduction of  Asp.net grid view Control.
• Example of Templatefield in gridview.
• Example of  DropDownList  inside gridView
• Asp.net grid viewControl Programming.
• Checkbox within Asp.Net gridView
• Ckeckbox list Example using javascript in gridview. 
• Asp.net textbox control in inside of gridview