Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Friday, August 1, 2014

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
Header check box in Gridview

Download Example code 

Other Post :

No comments:

Post a Comment