Enhancing gridview using jquery when deleting mulitple rows - Part 29

Suggested Videos 
Part 26 - Displaying summary data in asp.net gridview footer
Part 27 - EmptyDataText and EmptyDataTemplate properties of asp.net gridview control
Part 28 - Delete mulitple rows from asp.net gridview



Please watch Part 28 - Delete mulitple rows from asp.net gridview from gridview tutorial before proceeding with this video. 

Let us use Javascript to toggle the selection of checkboxes in gridview, instead of using server side code. This improves performance and user experience. 



When the user clicks the delete button, without selecting any rows, we should get a javascript alert box as shown below.


When I click delete after selecting a few rows, we should get a javascript confirmation dialog box as shown below.


Delete "AutoPostBack" and "oncheckedchanged" attributes from "HeaderTemplate" and "ItemTemplate"


Delete the following 2 methods from code-behind file

protected void cbDelete_CheckedChanged(object sender, EventArgs e)
protected void cbDeleteHeader_CheckedChanged(object sender, EventArgs e)

Copy and paste the following javascript code in the HEAD section of WebForm1.aspx
<script type="text/javascript" language="javascript">
    function toggleSelectionUsingHeaderCheckBox(source) {
        $("#GridView1 input[name$='cbDelete']").each(function () {
            $(this).attr('checked', source.checked);
        });
    }

    function toggleSelectionOfHeaderCheckBox() {
        if ($("#GridView1 input[name$='cbDelete']").length == $("#GridView1 input[name$='cbDelete']:checked").length) {
            $("#GridView1 input[name$='cbDeleteHeader']").first().attr('checked', true);
        }
        else {
            $("#GridView1 input[name$='cbDeleteHeader']").first().attr('checked', false);
        }
    }

    $(document).ready(function () {
        $("#btnDelete").click(function () {
            var rowsSelected = $("#GridView1 input[name$='cbDelete']:checked").length;
            if (rowsSelected == 0) {
                alert('No rows selected');
                return false;
            }
            else
                return confirm(rowsSelected + ' row(s) will be deleted');
        });
    });
</script>

Finally associate toggleSelectionUsingHeaderCheckBox() method with onclick event of CheckBox - cbDeleteHeader and toggleSelectionOfHeaderCheckBox() method with onclick event of CheckBox - cbDelete.