Using below method, all the checkboxes will select/unsleect inside
the gid. This will work as toggle. You have to add a checkbox inside
the header tag, when you will click on this checkbox then all the
checkbox inside the gid will select. You can use this method on
datagrid, datalist, gridview, listbox etc.
Gridview code in ASPX page
<asp:GridView Width="100%" ID="gdvListing" runat="server" GridLines="none"
DataKeyNames="LID" AllowSorting="true" AutoGenerateColumns="False" AllowPaging="True"
EmptyDataText="No Record Found !!" OnPageIndexChanging="gdvListing_PageIndexChanging"
OnRowCreated="gdvListing_RowCreated" OnSorting="gdvListing_Sorting" CellSpacing="1"
CellPadding="2" BorderWidth="0" EmptyDataRowStyle-Font-Bold="true">
<HeaderStyle HorizontalAlign="center" CssClass="Grid_HeaderStyle" />
<RowStyle HorizontalAlign="left" CssClass="rowStyle" />
<AlternatingRowStyle HorizontalAlign="left" CssClass="AlternateStyle" />
<Columns>
<asp:TemplateField HeaderStyle-HorizontalAlign="left">
<HeaderTemplate>
<input type="checkbox" name="ChkAll" onclick="SelectAllCheckbox(this,'frmPage','ContentPlaceHolder1_gdvListing')" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkBox" runat="server" />
</ItemTemplate>
<ItemStyle HorizontalAlign="left" Width="1%" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Javascript function to select all checkbox inside the grid
function SelectAllCheckbox(objChk, formName, gridName) {
var selectedBoxes = "";
formObj = document.forms[formName];
var SelectAllCheckbox = "";
if (formObj.elements[gridName]) {
SelectAllCheckbox = formObj.elements[gridName];
}
else if (document.getElementById(gridName)) {
returnval = document.getElementById(gridName);
}
if (SelectAllCheckbox.getElementsByTagName("input")) {
var inputTags = SelectAllCheckbox.getElementsByTagName("input");
var tagsLength = inputTags.length;
for (var i = 0; i < tagsLength; i++) {
if (objChk.checked == true) {
inputTags[i].checked = true;
}
else {
inputTags[i].checked = false;
}
}
}
return true;
}
Javascript function if you want to check that is record is selected or not in grid. If no record will be selected by checkbox then alert msg will popup.
function ConfirmationDelete(formName, gridName) {
var selectedBoxes = "";
formObj = document.forms[formName];
var retval = "";
if (formObj.elements[gridName]) {
retval = formObj.elements[gridName];
}
else if (document.getElementById(gridName)) {
retval = document.getElementById(gridName);
}
var inputTags = retval.getElementsByTagName("input");
var tagsLength = inputTags.length;
for (var i = 0; i < tagsLength; i++) {
if (inputTags[i].checked == true)
selectedBoxes = "1";
}
if (selectedBoxes.length > 0) {
return window.confirm("Are you sure you want to delete records?");
}
else {
alert("Please select the item(s) you want to delete!");
return false;
}
}
Gridview code in ASPX page
<asp:GridView Width="100%" ID="gdvListing" runat="server" GridLines="none"
DataKeyNames="LID" AllowSorting="true" AutoGenerateColumns="False" AllowPaging="True"
EmptyDataText="No Record Found !!" OnPageIndexChanging="gdvListing_PageIndexChanging"
OnRowCreated="gdvListing_RowCreated" OnSorting="gdvListing_Sorting" CellSpacing="1"
CellPadding="2" BorderWidth="0" EmptyDataRowStyle-Font-Bold="true">
<HeaderStyle HorizontalAlign="center" CssClass="Grid_HeaderStyle" />
<RowStyle HorizontalAlign="left" CssClass="rowStyle" />
<AlternatingRowStyle HorizontalAlign="left" CssClass="AlternateStyle" />
<Columns>
<asp:TemplateField HeaderStyle-HorizontalAlign="left">
<HeaderTemplate>
<input type="checkbox" name="ChkAll" onclick="SelectAllCheckbox(this,'frmPage','ContentPlaceHolder1_gdvListing')" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkBox" runat="server" />
</ItemTemplate>
<ItemStyle HorizontalAlign="left" Width="1%" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Javascript function to select all checkbox inside the grid
function SelectAllCheckbox(objChk, formName, gridName) {
var selectedBoxes = "";
formObj = document.forms[formName];
var SelectAllCheckbox = "";
if (formObj.elements[gridName]) {
SelectAllCheckbox = formObj.elements[gridName];
}
else if (document.getElementById(gridName)) {
returnval = document.getElementById(gridName);
}
if (SelectAllCheckbox.getElementsByTagName("input")) {
var inputTags = SelectAllCheckbox.getElementsByTagName("input");
var tagsLength = inputTags.length;
for (var i = 0; i < tagsLength; i++) {
if (objChk.checked == true) {
inputTags[i].checked = true;
}
else {
inputTags[i].checked = false;
}
}
}
return true;
}
Javascript function if you want to check that is record is selected or not in grid. If no record will be selected by checkbox then alert msg will popup.
function ConfirmationDelete(formName, gridName) {
var selectedBoxes = "";
formObj = document.forms[formName];
var retval = "";
if (formObj.elements[gridName]) {
retval = formObj.elements[gridName];
}
else if (document.getElementById(gridName)) {
retval = document.getElementById(gridName);
}
var inputTags = retval.getElementsByTagName("input");
var tagsLength = inputTags.length;
for (var i = 0; i < tagsLength; i++) {
if (inputTags[i].checked == true)
selectedBoxes = "1";
}
if (selectedBoxes.length > 0) {
return window.confirm("Are you sure you want to delete records?");
}
else {
alert("Please select the item(s) you want to delete!");
return false;
}
}