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