How to select all checkbox inside a gridview datagrid in asp.net Javascript

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.

/Multiselect-Checkbox-datagrid-Gridview

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;
    }
}

 

 

Related Alrticles

FREE!!! Registration