Select/deselect checkboxes in a gridview using javascript RSS

• • Reply
  

  tu

  0 Points

  9 Posts

  Select/deselect checkboxes in a gridview using javascript

  Nov 14, 2012 04:02 PM|LINK

  Hi,

  I have a gridview with 1000 rows and also has a paging in the gridview using the pager control. Each page contain 30 records only if i select the header checkbox it should select all the 1000 rows checkboxes in gridview respective of paging. if deselect it should deselect the 1000 rows checkboxes in the gridview using the javascript. if i select only selected rows in a gridview  those values.The selected checkbox values should be  saved while doing the paging or by selecting the header checkbox.

  For now im able to select only  first page records check boxes when i click on the header checkbox in a grid view.

  can u please help in finding a solution for this.

  Thanks in Advance

• • Reply
  

  javedwahid

  Participant

  1687 Points

  471 Posts

  Re: Select/deselect checkboxes in a gridview using javascript

  Nov 14, 2012 05:18 PM|LINK

  Are you using jQuery.  If so, maybe you can do a selector $("CLASS_NAME").attr('checked', 'checked')

  If not, please post your code

  I don't understand why after you help someone, they don't mark your post as the answer. What's up with that???
• • Reply
  

  tu

  0 Points

  9 Posts

  Re: Select/deselect checkboxes in a gridview using javascript

  Nov 14, 2012 07:47 PM|LINK

  no im not using jquery

  this is the javascript im using

   <script language="javascript" type="text/javascript">
          function SelectAll(CheckBox) {
              TotalChkBx = parseInt('<%= this.GrdMedical.Rows.Count %>');
              var TargetBaseControl = document.getElementById('<%= this.GrdMedical.ClientID %>');
              var TargetChildControl = "chkchild";
              var Inputs = TargetBaseControl.getElementsByTagName("input");
              for (var iCount = 0; iCount < Inputs.length; ++iCount) {
                  if (Inputs[iCount].type == 'checkbox' && Inputs[iCount].id.indexOf(TargetChildControl, 0) >= 0)
                      Inputs[iCount].checked = CheckBox.checked;
              }
          }
          function SelectDeSelectHeader(CheckBox) {
              TotalChkBx = parseInt('<%= this.GrdMedical.Rows.Count %>');
              var TargetBaseControl = document.getElementById('<%= this.GrdMedical.ClientID %>');
              var TargetChildControl = "chkchild";
              var TargetHeaderControl = "chkheader";
              var Inputs = TargetBaseControl.getElementsByTagName("input");
              var flag = false;
              var HeaderCheckBox;
              for (var iCount = 0; iCount < Inputs.length; ++iCount) {
                  if (Inputs[iCount].type == 'checkbox' && Inputs[iCount].id.indexOf(TargetHeaderControl, 0) >= 0)
                      HeaderCheckBox = Inputs[iCount];
                  if (Inputs[iCount] != CheckBox && Inputs[iCount].type == 'checkbox' && Inputs[iCount].id.indexOf(TargetChildControl, 0) >= 0 && Inputs[iCount].id.indexOf(TargetHeaderControl, 0) == -1) {
                      if (CheckBox.checked) {
                          if (!Inputs[iCount].checked) {
                              flag = false;
                              HeaderCheckBox.checked = false;
                              return;
                          }
                          else
                              flag = true;
                      }
                      else if (!CheckBox.checked)
                          HeaderCheckBox.checked = false;
                  }
              }
              if (flag)
                  HeaderCheckBox.checked = CheckBox.checked
          }
  
      </script>

  grid view:

    <asp:GridView ID="GrdMedical" runat="server" AllowSorting="false" AutoGenerateColumns="False"
              EmptyDataText="No Data Found" Width="100%"  OnRowDataBound="GrdMedical_RowDataBound" PagerSettings-Visible="false">
              <Columns>
                  <asp:TemplateField>
                    <ItemTemplate>
                          <asp:CheckBox ID="chkchild" runat="server" />
                      </ItemTemplate>
                      <HeaderTemplate>
                          <asp:CheckBox ID="chkheader" runat="server" onclick="SelectAll(this);" />
                      </HeaderTemplate>
                         </asp:TemplateField>

    <asp:BoundField DataField="Last_NM" HeaderText="Last Name" SortExpression="Last_Name"
                      NullDisplayText="--" HtmlEncode="False" HtmlEncodeFormatString="False">
                      <ItemStyle Wrap="False"/>
                      <HeaderStyle Wrap="False" />
                  </asp:BoundField>
                  <asp:BoundField DataField="First_NM" HeaderText="First Name" SortExpression="First_Name"
                      NullDisplayText="--" HtmlEncode="False" HtmlEncodeFormatString="False">
                      <ItemStyle Wrap="False"  />
                      <HeaderStyle Wrap="False" />
                  </asp:BoundField>
                  <asp:BoundField DataField="Mid_Initial" HeaderText="M.Initial" SortExpression="Mid_Initial"
                       NullDisplayText="--" HtmlEncode="False" HtmlEncodeFormatString="False">
                      <ItemStyle Wrap="False"  />
                      <HeaderStyle Wrap="False" />
                  </asp:BoundField>
                  <asp:BoundField DataField="Date_Of_Birth" HeaderText="DOB"
                      SortExpression="Date_Of_Birth" DataFormatString="{0:dd/MMM/yyyy}" HtmlEncode="false"
                      NullDisplayText="--">
                      <ItemStyle Wrap="False"  />
                      <HeaderStyle Wrap="False" />
                  </asp:BoundField>

    </Columns>
          </asp:GridView>

  code behind on RowDataBound:

    protected void GrdMedical_RowDataBound(object sender, GridViewRowEventArgs e)
          { 

  if (e.Row.RowType == DataControlRowType.DataRow)
              {
                  string strScript = "SelectDeSelectHeader(" + ((CheckBox)e.Row.Cells[0].FindControl("chkchild")).ClientID + ");";
                  ((CheckBox)e.Row.Cells[0].FindControl("chkchild")).Attributes.Add("onclick", strScript);

  }

  }

• • Reply
  

  NickGruppuso

  Member

  6 Points

  4 Posts

  Re: Select/deselect checkboxes in a gridview using javascript

  Nov 14, 2012 08:33 PM|LINK

  Thank you.

• • Reply
  

  Madha Dhanas...

  Member

  391 Points

  188 Posts

  Re: Select/deselect checkboxes in a gridview using javascript

  Nov 15, 2012 09:10 AM|LINK

  refer the links

  http://www.codeproject.com/Tips/422713/Check-all-checkboxes-in-GridView-using-jQuery

  http://www.aspdotnet-suresh.com/2012/09/check-uncheck-all-checkboxes-in.html

  http://www.mindfiresolutions.com/Select-DeSelect-all-checkboxes-in-gridview-using-JQuery-439.php

  http://www.ezzylearning.com/tutorial.aspx?tid=4639233

  Please click "Mark as Answer" if you think this post answer your question
  
  Ragards,
  Madha.V
• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: Select/deselect checkboxes in a gridview using javascript

  Nov 15, 2012 10:39 AM|LINK

  Hi,

  As you have said you are able to do it with the current page. Gridview renders only the page that is visible. So, using only javascript or jquery it not possible. You can save the selection in session you can give the session data as a list/dictionary with pagenumber as index and each list item should take string array. String array can contain the checkbox client ids that are selected in a page. While page is changing save the current page selection in the session.

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
  • Marked as answer by Yanping Wang - MSFT on Nov 21, 2012 01:05 AM
• • Reply
  

  Afzaal.Ahmad...

  Contributor

  2661 Points

  1040 Posts

  Re: Select/deselect checkboxes in a gridview using javascript

  Nov 15, 2012 01:21 PM|LINK

  All you can do is to let the users or yourself chose the elements from the first page only. When you move to next page the previous selected Items are discarded or are saved if you tell server to.

  Here your issue is to select all ?? Ok use jQuery for a checkbox that if that box is selected all boxes under it with a class or id are selected or something like that. But if one box from given boxes is selected only that is selected and value is automatically grabed from that one. You dont need to do anything else with that.

  Now You needed to work out others too I mean from previous. So you should save the work. Or you can use AJAX to get new results. For example you have 50 result. You should try to have a code which would get the next 50 results from database on click. I am not much great in Ajax so I wont help you in that code. Sorry! This way you wont miss the previous choices and also will get the latest ones :) Hope it helps.

  Please "Marks As Answer" if any answer helped you out!
  ~~! FIREWALL !~~
• • Reply
  

  tu

  0 Points

  9 Posts

  Re: Select/deselect checkboxes in a gridview using javascript

  Nov 15, 2012 06:26 PM|LINK

  Thank u i will try the ways u told me. i will tell u if i have any doubts