Need a client side script to update gridview row data when checkbox is checked.

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • dev99
    New Member
    • Mar 2013
    • 12

    Need a client side script to update gridview row data when checkbox is checked.

    I have a gridview that contains a checkbox and a Label on each row. I am using client side javascript to display a count of checkboxes checked to avoid post backs. I now also want to get/update the Label value on each row when the checkbox is checked or unchecked - but can't quite figure it out. Any help or direction to a similar post would be appreciated. See current code below:

    JavaScript code:
    Code:
    function CheckBoxCount() {
       var gv = document.getElementById("<%= gv02ROLE.ClientID %>");
       var inputList = gv.getElementsByTagName("input");
       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) { 
          document.getElementById('<%=statusLabel1.ClientID%>').innerHTML = ' '; 
       }
       else { 
             document.getElementById('<%=statusLabel1.ClientID%>').innerHTML = numChecked + ' Items Selected.'; 
        }
    }
    Gridview:
    Code:
    <asp:TemplateField HeaderText="Select" Visible="true">
    <ItemTemplate>
        <asp:CheckBox ID="rolSelChk" runat="server" CssClass="mychk" Checked="false" Enabled="true" onClick="javascript:CheckBoxCount()"/>
    </ItemTemplate>
    </asp:TemplateField>
    
    <asp:TemplateField HeaderText="Status" Visible="true">
    <ItemTemplate>
       <asp:Label ID="rolStatus" runat="server" Text="" CausesValidation="False"></asp:Label> 
    </ItemTemplate>
    </asp:TemplateField>
  • Frinavale
    Recognized Expert Expert
    • Oct 2006
    • 9749

    #2
    Add a parameter to the JavaScript method CheckBoxCount and pass this to the method in the onClick event.

    That way you have a reference to the checkbox that was clicked in your JavaScript code.

    From there you can walk up the DOM to find the row that checkbox belongs to so that you can then find the label that you want to update.

    -Frinny

    Comment

    Working...