How to show/hide Child gridview based on CheckBox Click in Parent Grid No PostBack

I am not a JavaScript expert and I have a need to display a hidden child gridview when the parent gridview checkbox is checked or hidden when the parent checkbox is unchecked. The child gridview is initially not displayed.
I have attached code that I have developed so far.

Experts please help. Thanks.  CodeExample.txt
mconti41Asked:
Who is Participating?
 
meagain35Connect With a Mentor Commented:
Try implementing something like this around your child grid.




<html>
<head>

<script language='javascript'>
  function show_hide() {
    var action = "hide";

    if(document.getElementById('chk').checked == true) {
        action = "show";
     } else {
        action = "hide";
     }
    
    if (action == "hide") {
       document.getElementById('myGridDiv').style.display="none";
    }
    
    if(action == "show") {
       document.getElementById('myGridDiv').style.display="block";
    }
  }
</script>

</head>

<body>
<form name="form1">
  <input type="checkbox" onclick="show_hide()" id="chk">Show/Hide</input>

  <div id="myGridDiv" style="width:100px; height:100px; background-color:#FF0000; display:none;">
     My Grid
  </div>
</form>
</body>

</html>

Open in new window

0
 
mconti41Author Commented:
Thanks for the response...

The result is excellent for the first gridview row but the other gridview rows do not respond to a click> Do you have any thoughts on this.




0
 
mconti41Author Commented:
Solution only handled first gridview row and not a multiple row gridview.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.