Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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.
no rows selected in gridview to delete

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

Delete "AutoPostBack" and "oncheckedchanged" attributes from "HeaderTemplate" and "ItemTemplate"
Enhancing gridview using jquery when deleting mulitple rows

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.
Associate javascript functions with client side events of controls

2 comments:

  1. Thank you so much for this excellent tutorials sir, however if sb got problems like me, with jqyery functions not working properly, try this code:

    function toggleSelectionUsingHeaderCheckBox(source) {
    $("#GridView1 input[name$='cbDelete']").each(function () {
    $(this).prop('checked', source.checked);
    });
    }

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

    $(document).ready(function () {
    $("#GridView1 input[name$='btnDeleteSelected']").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');
    });
    });

    cheers guys

    ReplyDelete
  2. thanks for your support sir please guide to deselect gridview row by using jquery

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.