By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,950 Members | 990 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,950 IT Pros & Developers. It's quick & easy.

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

P: 12
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:
Expand|Select|Wrap|Line Numbers
  1. function CheckBoxCount() {
  2.    var gv = document.getElementById("<%= gv02ROLE.ClientID %>");
  3.    var inputList = gv.getElementsByTagName("input");
  4.    var numChecked = 0;
  5.  
  6.    for (var i = 0; i < inputList.length; i++) {
  7.       if (inputList[i].type == "checkbox" && inputList[i].checked) {
  8.          numChecked = numChecked + 1;
  9.       }
  10.    }
  11.    if (numChecked == 0) { 
  12.       document.getElementById('<%=statusLabel1.ClientID%>').innerHTML = ' '; 
  13.    }
  14.    else { 
  15.          document.getElementById('<%=statusLabel1.ClientID%>').innerHTML = numChecked + ' Items Selected.'; 
  16.     }
  17. }
  18.  
Gridview:
Expand|Select|Wrap|Line Numbers
  1. <asp:TemplateField HeaderText="Select" Visible="true">
  2. <ItemTemplate>
  3.     <asp:CheckBox ID="rolSelChk" runat="server" CssClass="mychk" Checked="false" Enabled="true" onClick="javascript:CheckBoxCount()"/>
  4. </ItemTemplate>
  5. </asp:TemplateField>
  6.  
  7. <asp:TemplateField HeaderText="Status" Visible="true">
  8. <ItemTemplate>
  9.    <asp:Label ID="rolStatus" runat="server" Text="" CausesValidation="False"></asp:Label> 
  10. </ItemTemplate>
  11. </asp:TemplateField>
  12.  
Dec 10 '14 #1

✓ answered by Frinavale

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

Share this Question
Share on Google+
1 Reply


Frinavale
Expert Mod 5K+
P: 9,731
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
Dec 11 '14 #2

Post your reply

Sign in to post your reply or Sign up for a free account.