vendredi 8 septembre 2023

asp.net check/uncheck all checkboxes inside gridview

I have this gridview:

<asp:GridView DataKeyNames="IdUtente" runat="server" ID="grdUtenti" AllowPaging="True" CssClass="tablestyle" AutoGenerateColumns="false" OnPageIndexChanging="grdUtenti_PageIndexChanging" EnableViewState="false" ViewStateMode="Enabled">

and the last column contains one checkbox in the header and for each row:

<asp:TemplateField>
 <HeaderTemplate>
  <asp:CheckBox runat="server" ID="checkAll" onclick="javascript:GridSelectAllColumn(this, 'chk');" />
 </HeaderTemplate>
 <ItemTemplate>
  <asp:CheckBox ID="chkSelect" runat="server" onclick="Check_Click(this)" />
 </ItemTemplate>
 <ItemStyle Width="3%" />
 <EditItemTemplate>
 </EditItemTemplate>
</asp:TemplateField>

I finally have this javascript functions:

<script type="text/javascript">
    function Check_Click(objRef) {
        //Get the Row based on checkbox

        var row = objRef.parentNode.parentNode;
        var x = document.getElementById("divEliminaTutto")
        if (objRef.checked) {
            //If checked change color to Aqua
            row.style.backgroundColor = "#f3ef98";
        }
        else {
            //If not checked change back to original color
            if (row.rowIndex % 2 == 0) {
                //Alternating Row Color
                row.style.backgroundColor = "WhiteSmoke";
            }
            else {
                row.style.backgroundColor = "white";
            }
        }

        //Get the reference of GridView
        var GridView = row.parentNode;

        //Get all input elements in Gridview
        var inputList = GridView.getElementsByTagName("input"); //checkAll

        for (var i = 0; i < inputList.length; i++) {
            //The First element is the Header Checkbox
            var headerCheckBox = document.getElementById("grdUtenti_checkAll"); //inputList[0];

            //Based on all or none checkboxes
            //are checked check/uncheck Header Checkbox
            var checked = true;
            if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox) {
                if (!inputList[i].checked) {
                    checked = false;
                    break;
                }
            }
        }
        headerCheckBox.checked = checked;

        //INIZIO CONTEGGIO CHECKBOX SELEZIONATI PER MOSTRARE\NASCONDERE IL PULSANTE ELIMINA
        var numChecked = 0;
        for (var i = 0; i < inputList.length; i++) {
            if (inputList[i].type == "checkbox" && inputList[i].checked) {
                numChecked = numChecked + 1;
            }
        }
        if (numChecked > 0) {
            x.style.display = "block";
        }
        else {
            x.style.display = "none";
        }
        //FINE
    }

    function GridSelectAllColumn(spanChk) {
        var x = document.getElementById("divEliminaTutto")
        var oItem = spanChk.children;
        var theBox = (spanChk.type == "checkbox") ? spanChk : spanChk.children.item[0]; xState = theBox.checked;
        elm = theBox.form.elements;



        for (i = 0; i < elm.length; i++) {
            if (elm[i].type === 'checkbox' && elm[i].checked != xState)
                elm[i].click();
        }

    }
</script>

It does what it should and beyond, meaning when I click the CheckAll checkbox it selects all checkboxes in the page even if they are outside the gridview. How can I just select the checkbox inside the gridview (and better, only those with "chkSelect" ID?) Thanks

EDIT: I included all the javascript functions to give a complete view of the code, but the focus for my need is on GridSelectAllColumn function.




Aucun commentaire:

Enregistrer un commentaire