Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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

4 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
    Replies
    1. Thank you for giving solution,,,It works properly...

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

    ReplyDelete
  3. Can Anybody Help my Check box is in a content placeholder this is the way it comes if you view source ctl00$ContentPlaceHolder1$GridView1$ctl01$cbDeleteHeader. how can i get the it

    ReplyDelete

It would be great if you can help share these free resources