CODEWITHSUNDEEP
javascriptjqueryasp.net
Adesh Gaonkar
Adesh Gaonkar

Reputation: 31

Check all CheckBoxes in Page

I want to select all row of all pages in asp.net grid view when select all check box is checked using jquery,my code selecting the value of only first page.

<script type="text/javascript">

           function SelectAllCheckboxes(chk) {
                debugger;

                $("[id*=chkSelectAll]").live("click", function () {
                    var chkHeader = $(this);
                    $("#<%=gvUnPaidInvoiceDetail.ClientID%> tr").each(function () {
                        var grid = $(this).closest("table");

                        $("[id*=chkSelect]", grid).each(function () {
                            if (chkHeader.is(":checked")) {
                                $(this).attr("checked", "checked");

                            } else {
                                $(this).removeAttr("checked");

                            }
                        });
                    });
                });
            }
        </script>

<asp:TemplateField HeaderText="Select">
  <HeaderTemplate>
   <asp:CheckBox ID="chkSelectAll" runat="server" Text="" onclick="SelectAllCheckboxes(this);" />
 </HeaderTemplate>

 <ItemTemplate>
   <asp:CheckBox ID="chkSelect" runat="server" />
 </ItemTemplate>
</asp:TemplateField>

Upvotes: 0

Views: 2354

Answers (4)

Sami
Sami

Reputation: 8419

<asp:TemplateField HeaderText="Select">
  <HeaderTemplate>
   <asp:CheckBox ID="chkSelectAll" runat="server" Text="" onclick="SelectAllCheckboxes(this);" />
   <!--I am not sure if above function called. You might need onClientClick
   insted of onclick-->
 </HeaderTemplate>

 <ItemTemplate>
   <asp:CheckBox ID="chkSelect" cssClass='chkSelect' runat="server" />
   <!-- I made a change to add cssClass attribute because using single ID 
    for multiple elements is not a good approach use class instead-->
 </ItemTemplate>
</asp:TemplateField>

<script type="text/javascript">
function SelectAllCheckboxes()
{
    alert("called");
    // if you want to really check/uncheck all then simply

    //$('.chkSelect').attr("checked","checked"); and
    //$('.chkSelect').removeAttr("checked");

    // But it seems you want to toggle so
     var chekedBoxes = $('.chkSelect:checked');
     var unchekedBoxes = $('.chkSelect:not(:checked)');
     chekedBoxes.removeAttr("checked");
     unchekedBoxes.attr("checked", "checked");        
}
</script>

Upvotes: 0

Satinder singh
Satinder singh

Reputation: 10208

No need to check for each tr on client side, as you want all data whenever user click on header checkbox.

   <asp:CheckBox ID="chkSelectAll" runat="server" Text=""   
    AutoPostBack="true" OnCheckedChanged="chkSelectAll_CheckedChanged"  />

protected void chkSelectAll_CheckedChanged(object sender, EventArgs e)
{
    CheckBox ChkBoxHeader = (CheckBox)Grd.HeaderRow.FindControl("chkSelectAll");
    if (ChkBoxHeader.Checked)
     {
          // Bind Your gridview without pagination
          GridView1.AllowPaging = False;
          BindGridView();
          GridView1.AllowPaging = True;
     }


}

public void   BindGridView(){
     // code to bind gridview
}

Upvotes: 0

Ajay2707
Ajay2707

Reputation: 5808

As you have used paging, so at any time only 10 records (pagesize of grid) exist.

So when you go to 2nd page, its show the 2nd page, but actually in the grid it have only from 11 to 20 actual records.

So if you want to get all other page's data to select eigher remove paging or you have to maintain the click of record in javascript variable as a array.

Without paging is good, you just put your grid into div and give the style or by css as

<div stype ='overflow-x=auto; height: 500px'> <your asp Grid> </div>

If you want with paging create a array as :

How can I create a two dimensional array in JavaScript?

On click store the id with add or remove from array.

For add: http://www.w3schools.com/jsref/jsref_splice.asp

For remove :How do I remove a particular element from an array in JavaScript?

Upvotes: 0

Genish Parvadia
Genish Parvadia

Reputation: 1455

use this js for all checkbox check and uncheck

$(document).ready(function () {
$('#MainContent_repCustomers_chkCheckAll').click(function () {
    if ($(this).is(':checked')) {
        $("div#customer table tbody tr td 
            input:[type='checkbox']:not(:checked)").each(function () {
            $(this).attr('checked', true);
        });
    }
    else {

        $("div#customer table tbody tr td 
                input:[type='checkbox']:checked").each(function () {
            $(this).attr('checked', false); 
        });
    }
});
});

Upvotes: 1

Related Questions