Check Uncheck all CheckBoxes in an ASP.NET GridView using jQuery with Update panel RSS

• • Reply
  

  Rameezwaheed

  Contributor

  3730 Points

  1595 Posts

  Check Uncheck all CheckBoxes in an ASP.NET GridView using jQuery with Update panel

  Dec 13, 2012 04:57 AM|LINK

  Hi all,

  Iam going to implement Check , Uncheck all checkeboxes in Gridview using Jquery . while Gridview is inside Udpate Panel. i have used the below code and it is working without update panel . while using update panel it does not work .

  <script type="text/javascript">
          $(document).ready(function () {
              $("input[type=checkbox][id*=chkAll]").click(function () {
                  if ($(this).is(':checked'))
                      $("input[type=checkbox][id*=chkEmployee]").attr('checked', true);
              });
          });
  
      </script>

  and Here is Gridview Markup

  <asp:UpdatePanel ID="UpdPnl" runat="server">
  <ContentTemplate>
   <asp:GridView ID="grdEmployee" runat="server" AutoGenerateColumns="false"
  
                          ShowFooter="true" CellPadding="0" CssClass="tbl" CellSpacing="0" EmptyDataText="No Records Found"
                          DataKeyNames="EmployeeId">
                          <Columns>
                              <asp:TemplateField>
                                  <HeaderTemplate>
                                      <asp:CheckBox runat="server" ID="chkAll" />
                                  </HeaderTemplate>
                                  <ItemTemplate>
                                      <asp:CheckBox runat="server" ID="chkEmployee" />
                                  </ItemTemplate>
                              </asp:TemplateField>
                              <asp:TemplateField HeaderText="S.No">
                                  <ItemTemplate>
                                      <%#Container.DataItemIndex+1%>
                                  </ItemTemplate>
                              </asp:TemplateField>
                              <asp:BoundField DataField="EmployeeName" HeaderText="Name of  Employee" />                           
                          </Columns>
                          <SelectedRowStyle BackColor="#FFCC99" />
                          <HeaderStyle Wrap="False" />
                      </asp:GridView>
   </ContentTemplate>
          <Triggers>
              <asp:PostBackTrigger ControlID="btnSubmit" />
          </Triggers>
      </asp:UpdatePanel>
  

  
  
  

  Issue is how can i get the Checkbox Checked while girdivew is inside Udpate Panel?

  Regards,
  

  life is name of learning!
  Mark as an answer if it helps
  • Edited by Rameezwaheed on Dec 13, 2012 04:58 AM
• • Reply
  

  alankarp

  Contributor

  2042 Points

  345 Posts

  Re: Check Uncheck all CheckBoxes in an ASP.NET GridView using jQuery with Update panel

  Dec 13, 2012 05:03 AM|LINK

  Hi,

  Please see below URLs

  http://stackoverflow.com/questions/9586903/document-ready-is-not-working-after-postback

  http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels

  I am assuming jquery is not working after postback.

  Thanks

  Alankar

  Alankar Patil
  
  Profile
• • Reply
  

  me_ritz

  Star

  9337 Points

  1447 Posts

  Re: Check Uncheck all CheckBoxes in an ASP.NET GridView using jQuery with Update panel

  Dec 13, 2012 05:06 AM|LINK

  Rameezwaheed

  <script type="text/javascript">
          $(document).ready(function () {
              $("input[type=checkbox][id*=chkAll]").click(function () {
                  if ($(this).is(':checked'))
                      $("input[type=checkbox][id*=chkEmployee]").attr('checked', true);
              });
          });
  
      </script>

  <script type="text/javascript">
          $(document).ready(function () {
              $("input[type=checkbox][id*=chkAll]").on("click", function () {
                  if ($(this).is(':checked'))
                      $("input[type=checkbox][id*=chkEmployee]").attr('checked', true);
              });
          });
  </script>

  Please mark the post as "Answer" that helps you.
• • Reply
  

  Rameezwaheed

  Contributor

  3730 Points

  1595 Posts

  Re: Check Uncheck all CheckBoxes in an ASP.NET GridView using jQuery with Update panel

  Dec 13, 2012 05:15 AM|LINK

  Thanks for fast reply,

  Actually i have Gridview inside the Update Panel with Header Checkbox and RowItem Checkbox .  Let me try the suggested links and will back to you.

  Any Article which shows Girdview inside Udpate Panel with the similar functionality?

  Regards,

  life is name of learning!
  Mark as an answer if it helps
• • Reply
  

  Rameezwaheed

  Contributor

  3730 Points

  1595 Posts

  Re: Check Uncheck all CheckBoxes in an ASP.NET GridView using jQuery with Update panel

  Dec 13, 2012 05:17 AM|LINK

  Hi me_ritz,

  I tried your suggested code but it is not working.

  Regards,

  life is name of learning!
  Mark as an answer if it helps
• • Reply
  

  Rameezwaheed

  Contributor

  3730 Points

  1595 Posts

  Re: Check Uncheck all CheckBoxes in an ASP.NET GridView using jQuery with Update panel

  Dec 13, 2012 06:49 AM|LINK

  Hi ,

  iam using the below code for implementing above functionality. but it is only working if iam going to Bind the Girdview on Page Load but i need to bind the Gridview on DropDownlist selected index changed.

  Here is my code 

  <script type="text/javascript">
          // $(document).ready(function() {
          $("#<%=ddlBasicPayCode.ClientID%>").change(function () {
              $("#<%=grdEmployee.ClientID%> input[id*='chkEmployee']:checkbox").click(CheckUncheckAllCheckBoxAsNeeded);
              $("#<%=grdEmployee.ClientID%> input[id*='chkAll']:checkbox").click(function () {
                  if ($(this).is(':checked'))
                      $("#<%=grdEmployee.ClientID%> input[id*='chkEmployee']:checkbox").attr('checked', true);
                  else
                      $("#<%=grdEmployee.ClientID%> input[id*='chkEmployee']:checkbox").attr('checked', false);
              });
          });
          //});
          function CheckUncheckAllCheckBoxAsNeeded() {
              var totalCheckboxes = $("#<%=grdEmployee.ClientID%> input[id*='chkEmployee']:checkbox").size();
              var checkedCheckboxes = $("#<%=grdEmployee.ClientID%> input[id*='chkEmployee']:checkbox:checked").size();
              if (totalCheckboxes == checkedCheckboxes) {
                  $("#<%=grdEmployee.ClientID%> input[id*='chkAll']:checkbox").attr('checked', true);
              }
              else {
                  $("#<%=grdEmployee.ClientID%> input[id*='chkAll']:checkbox").attr('checked', false);
              }
          }
      </script>

  But above code is not working on DropDownlist Selected Index Changed?

  Any  thing iam doing worng?
  
  

  life is name of learning!
  Mark as an answer if it helps
• • Reply
  

  matifnadeem

  Contributor

  4580 Points

  1090 Posts

  Re: Check Uncheck all CheckBoxes in an ASP.NET GridView using jQuery with Update panel

  Dec 14, 2012 09:29 AM|LINK

  Rameezwaheed

  Actually i have Gridview inside the Update Panel with Header Checkbox and RowItem Checkbox .  Let me try the suggested links and will back to you.

  Hi RameezWaheed,

  Checkout below mentioned code

  JAVASCRIPT CODE:
  -----------------
  
  function SelectAll(chk) {
  
     var NodeValue;
     var gvwlist = document.getElementById('<%=GridView1.ClientID%>');
     var RowsCount = gvwlist.rows.length;
  
     for (j = 1; j <= RowsCount - 1; j++) {
  
        NodeValue = gvwlist.rows[j].cells[0].childNodes[0].id;
  
        if (NodeValue != "") {
  
             var chkSelected = document.getElementById(NodeValue);
   
             if (chk.checked == true) {
   
                 chkSelected.checked = true;
              }
              else {
  
                 chkSelected.checked = false;
              }
         }
      }
  }
  
  GRIDVIEW TEMPLATE FIELD MARKUP:
  --------------------------------
  
  <asp:TemplateField>
    <HeaderTemplate>
       <asp:CheckBox ID="chkSelectAll" runat="server" onclick="SelectAll(this);" />
    </HeaderTemplate>
    <ItemTemplate>
       <asp:CheckBox ID="chkSelected" runat="server" />
    </ItemTemplate>
  </asp:TemplateField>

  If any query remains then let me know.

  Cheers.

  
  M Atif Nadeem
  Mark as Answer if you got right thing
  Read my blog | Follow me on LinkedIn
  • Marked as answer by Song-Tian - MSFT on Dec 20, 2012 09:33 AM