Bdtjtk

I want when I check the checkbox in the header template, then other checkboxes in the Item Template should get checked as well Unfortunately this is not working as expected. I added script referencing a the jquery version 1.6.2 in the head tag of the HTML then a function that which will be fired after the checked box is clicked. Also on the Checkbox in the Header Template, the onclick function has the jquery function which I wrote in the at the head tag. The Alert is working fine. I did this to help me test that Jquery is working. Notice no AutoPostBack attributes But the Toggling is not working.

//this script is in the head tag

function toggleSelectionUsingHeaderCheckBox(source) {

    $("#GridView1 input[name$='cbDelete']").each(function () {

        $(this).attr('checked', source.checked);

    });

    //alert('checked');

    //the alert above is working fine

}

the Gridview code from columns

<Columns>

    <asp:TemplateField>

        <HeaderTemplate>

            <asp:CheckBox ID="cbDeleteHeader" runat="server" onclick="toggleSelectionUsingHeaderCheckBox(this);" />

        </HeaderTemplate>

        <ItemTemplate>

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

        </ItemTemplate>

            </asp:TemplateField>

            <asp:TemplateField HeaderText="Id">

        <ItemTemplate>

            <asp:Label ID="lblEmployeeId" runat="server"

        Text='<%# Bind("EmployeeId") %>'></asp:Label>

        </ItemTemplate>

    </asp:TemplateField>

    <asp:BoundField DataField="StaffName" HeaderText="Name" />

    <asp:BoundField DataField="AccessRole" HeaderText="Access Role" />

    <asp:BoundField DataField="LockStatus" HeaderText="Status" />

</Columns>

You just have to loop through all the rows in the gridview, get the checkbox for each row and mark it as checked as shown below.

<Columns>

<asp:TemplateField>

    <HeaderTemplate>

        <asp:CheckBox ID="cbDeleteHeader" runat="server" onclick="toggleSelectionUsingHeaderCheckBox(this);" />

    </HeaderTemplate>

    <ItemTemplate>

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

    </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Id">

    <ItemTemplate>

        <asp:Label ID="lblEmployeeId" runat="server"

    Text='<%# Bind("EmployeeId") %>'></asp:Label>

    </ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="StaffName" HeaderText="Name" />

<asp:BoundField DataField="AccessRole" HeaderText="Access Role" />

<asp:BoundField DataField="LockStatus" HeaderText="Status" />

</Columns>

Then javascript

<script>

    function toggleSelectionUsingHeaderCheckBox(chkbx) {

        var GridView1 = document.getElementById("<%=GridView1.ClientID %>");

        for (i = 1; i < GridView1.rows.length; i++) {

            GridView1.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = chkbx.checked;

        }

    }

</script>

The checkbox in the gridview header calls the javascript function which does the looping and checking.

Hope this helps.

This finishes the job for me

var gridViewId = '#<%= GridView1.ClientID %>';

        function checkAll(selectAllCheckbox) {

            //get all checkboxes within item rows and select/deselect based on select all checked status

            //:checkbox is jquery selector to get all checkboxes

            $('td :checkbox', gridViewId).prop("checked", selectAllCheckbox.checked);

        }

        function unCheckSelectAll(selectCheckbox) {

            //if any item is unchecked, uncheck header checkbox as well

            if (!selectCheckbox.checked)

                $('th :checkbox', gridViewId).prop("checked", false);

        }

To count number of items checked, use this before performing an action on your button

$(document).ready(function () {

            $('#<%=btnDelete.ClientID%>').click(function () {



                var gv = document.getElementById("<%= GridView1.ClientID %>");

                var inputList = gv.getElementsByTagName("input");

                var numChecked = 0;



                for (var i = 0; i < inputList.length; i++) {

                    if (inputList[i].type == "checkbox" && inputList[i].checked) {

                        numChecked = numChecked + 1;

                    }

                }

                if (numChecked == 0) {

                    alert('No rows selected');

                    return false;

                }

                else {

                    return confirm(numChecked + ' row(s) will be locked or deleted');

                }

                });

            });

then the html markup

<Columns>

        <asp:TemplateField>

            <HeaderTemplate>

                <asp:CheckBox ID="cbDeleteHeader" runat="server" onclick="checkAll(this);" />

            </HeaderTemplate>

            <ItemTemplate>

                <asp:CheckBox ID="cbDelete" onclick="unCheckSelectAll(this);" runat="server" />

            </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Id">

            <ItemTemplate>

                <asp:Label ID="lblEmployeeId" runat="server"

                    Text='<%# Bind("EmployeeId") %>'></asp:Label>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:BoundField DataField="StaffName" HeaderText="Name" />

        <asp:BoundField DataField="AccessRole" HeaderText="Access Role" />

        <asp:BoundField DataField="LockStatus" HeaderText="Status" />

    </Columns>