Download 100% FREE Office Document APIs for .NET
DotNetFunda.com
Online: 806
Home > Forums > JavaScript >

Use One Javascript Function For Multiple GridViews

Posted by Sharpcnet under JavaScript on 12/14/2013 | Points: 10 | Views : 1348 | Status : [Member] | Replies : 1
Write New Post | Search Forums | AnsweredResolved Posts | Un Answered Posts | Forums Home 
I have a JS function to toggle check state for all the checkboxes in a gridview. Now, there are two similar gridviews and so, would like to use the same function.

This is Page structure:
Radiobutton rb1, RadioButton rb2
Gridview gv1, gridview gv2.
rb1 selected, shows only gv1 and hides gv2 and vice versa.
On page load, only rb1 is checked and gv1 is visble.

The JS function works fine when used for just one gridview. I changed it to this and it doesnt work. Where am I going wrong.

JS: 
<script type="text/javascript">

function SelectAll(chkBox){
 var chkAll = document.getElementById(chkBox);
 var elements;
 var g1 = document.getElementById('<%=gv1.ClientID%>');
 var g2 = document.getElementById('<%=gv2.ClientID%>');
 if(g1.style.visibility=='visible')
 {
   elements = document.getElementById('<%=gv1.ClientID%>')
            .getElementsByTagName("INPUT");
 }
 else if(g2.style.visibility=='visible')
 {
   elements = document.getElementById('<%=gv2.ClientID%>')
            .getElementsByTagName("INPUT");
 }
 for(var i=0;i<elements.length;i++){

  var chk;
  if(elements[i]!=null)
  {
    if(elements[i]!=null){
         if(elements[i].id.indexof('chkLeaveType')>0){
               chk=elements[i];
               chk.checked = chkAll.checked;    
      }
    }
  }
}
</script>
ASPX:
<asp:gridview id="gv1" runat="server">
<columns>
  <asp:templatefield> 
   <headertemplate>   
    <asp:checkbox id="chkheader" runat="server" checked="true"  
     onclick="SelectAll(this.id)"/>Leave Type  
   </headertemplate>
   <itemtemplate>
      <asp:checkbox id="chkLeaveType" runat="server" checked="true"/>
   </itemtemplate>
  </asp:templatefield> 
</columns>
</asp:gridview>

<asp:gridview id="gv2" runat="server">
<columns>
  <asp:templatefield> 
   <headertemplate>   
    <asp:checkbox id="chkheader" runat="server" checked="true" 
     onclick="SelectAll(this.id)"/>Leave Type  
   </headertemplate>
   <itemtemplate>
      <asp:checkbox id="chkLeaveType" runat="server" checked="true"/>
   </itemtemplate>
  </asp:templatefield> 
</columns>
</asp:gridview>




Reply | Reply with Attachment
Alert Moderator 

Responses

Posted by: Allemahesh on: 12/16/2013 [Member] [MVP] Silver | Points: 25

Up
0
Down
I got your problem.

Just Change your code as per below one:-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" language="javascript">

        function SelectAll(chkBox) {
            var chk = document.getElementById(chkBox);
            var g1 = document.getElementById('<%= gv1.ClientID %>');
            var g2 = document.getElementById('<%= gv2.ClientID %>');
            var grid = null;
            if (g1 != null) {
                grid = g1;
            }
            else if (g2 != null) {
                grid = g2;
            }
            var cell;
            if (chk.checked == true) {
                if (grid.rows.length > 0) {
                    for (i = 1; i < grid.rows.length; i++) {
                        for (var k = 0; k < grid.rows[i].cells.length; k++) {
                            cell = grid.rows[i].cells[k];
                            for (j = 0; j < cell.childNodes.length; j++) {
                                if (cell.childNodes[j].type == "checkbox") {
                                    cell.childNodes[j].checked = true;
                                }
                            }
                        }
                    }
                }
            }
            else {
                if (grid.rows.length > 0) {
                    for (i = 1; i < grid.rows.length; i++) {
                        for (var k = 0; k < grid.rows[i].cells.length; k++) {
                            cell = grid.rows[i].cells[k];
                            for (j = 0; j < cell.childNodes.length; j++) {
                                if (cell.childNodes[j].type == "checkbox") {
                                    cell.childNodes[j].checked = false;
                                }
                            }
                        }
                    }
                }
            }
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="gv1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="chkheader" runat="server" Checked="true" onclick="SelectAll(this.id)" />Leave
                        Type
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkLeaveType" runat="server" Checked="true" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:GridView ID="gv2" runat="server" AutoGenerateColumns="False" Visible="false">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="chkheader" runat="server" Checked="true" onclick="SelectAll(this.id)" />Leave
                        Type
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkLeaveType" runat="server" Checked="true" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>


Happy coding.

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response

Latest Posts