Link for csharp, asp.net, ado.net, dotnet basics and sql server video tutorial playlists
Link for text version of this video
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.
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
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’);
});
});
Finally associate toggleSelectionUsingHeaderCheckBox() method with onclick event of CheckBox – cbDeleteHeader and toggleSelectionOfHeaderCheckBox() method with onclick event of CheckBox – cbDelete.
