JavaScript not working for second Tab/RadTab

[John]

I have two nested gridviews inside two radtabs, for this two nested views, I have a simple JavaScript for Expand and Collapse.

<script type="text/javascript">
    function collapseExpand(obj) {
        var gvObject = document.getElementById(obj);
        var imageID = document.getElementById('image' + obj);

        if (gvObject.style.display == "none") {
            gvObject.style.display = "inline";
            imageID.src = "~/ims/Images/bullet_toggle_minus.jpg";
        }
        else {
            gvObject.style.display = "none";
            imageID.src = "~/ims/Images/bullet_toggle_plus.jpg";
        }
    }

The Java Script is working fine for the first RadGrid of the first tab. However, its not working with the second tab. I think the control is not able to transfer to the second grid. I think my problem is similar to

http://weblogs.asp.net/hajan/archive/2010/10/07/make-them-to-love-each-other-asp-net-ajax-updatepanels-amp-javascript-jquery-functions.aspx

I applied all the methods listed there but still its not working.

<script type="text/javascript">
    function load() {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(collapseExpand);
    } 
    function collapseExpand(obj) {
        var gvObject = document.getElementById(obj);
        var imageID = document.getElementById('image' + obj);

        if (gvObject.style.display == "none") {
            gvObject.style.display = "inline";
            imageID.src = "~/ims/Images/bullet_toggle_minus.jpg";
        }
        else {
            gvObject.style.display = "none";
            imageID.src = "~/ims/Images/bullet_toggle_plus.jpg";
        }
    }

Can somebody tell me what code to write to transfer or pass the control of javascript to the second tab?

Also, I am using Radtabs and RadPageView to display two grids in two tabs.

I am calling the Collapse Expand inside radtab

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="RadMultipage1">
<Tabs>
<telerik:RadTab Text="Tab1" PageViewID="RadPageView1" OnLoad="Load1">
  </telerik:RadTab>
  <telerik:RadTab Text="Tab2" PageViewID="RadPageView2" >
 </telerik:RadTab>
 </Tabs>
 </telerik:RadTabStrip>
 <telerik:RadMultiPage ID="RadMultipage1" runat="server">
<telerik:RadPageView ID="RadPageView1" runat="server" Width="100%" TabIndex="0">
<telerik:RadGrid ID="View1" runat="server" AutoGenerateColumns="False" Width="100"
    BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" 
      OnItemDataBound="RadGrid2_ItemDataBound" >
   <MasterTableView DataKeyNames="id">
   <Columns>
   <telerik:GridTemplateColumn>
   <ItemTemplate>
   <a href="javascript:collapseExpand('id_<%# Eval("id") %>');">
   <img id="imageSubId_<%# Eval("id") %>" alt="Click to show/hide orders" border="0" src="Images/bullet_toggle_plus.jpg" />
   </a>
   </ItemTemplate>
   </telerik:GridTemplateColumn>
   <telerik:GridBoundColumn DataField="id" HeaderText="ID"/>
   <telerik:GridBoundColumn DataField="fname" HeaderText="First Name"/>
   <telerik:GridBoundColumn DataField="lname" HeaderText="Last Name"/>
   <telerik:GridBoundColumn DataField="DOB" HeaderText="Date of Birth"/>
   <telerik:GridTemplateColumn>
   <ItemTemplate>
            <tr>
            <td colspan="100%">
            <div id="id_<%# Eval("id") %>" style="display: none; position: relative; left: 10px;">
            <telerik:RadGrid ID="View2" runat="server" AutoGenerateColumns="false" Width="400"
                    GridLines="None" >
            <MasterTableView >
                    <Columns>
                    <telerik:GridBoundColumn DataField="fname" HeaderText="First Name" />
                    <telerik:GridBoundColumn DataField="mname" HeaderText="Middle Name" />
                    <telerik:GridBoundColumn DataField="lname" HeaderText="Last Name" />
                    <telerik:GridTemplateColumn>
                    <ItemTemplate>
                    <asp:CheckBox ID="checkselect" runat="server" />
                    </ItemTemplate>
                    <HeaderTemplate>
                    <asp:Button ID="Button4" runat="server" Text="Remove"  CommandName="Split" OnClick="Button4_Click" />
                    </HeaderTemplate>
                    </telerik:GridTemplateColumn>
                    </Columns>
                    </MasterTableView >
             </telerik:RadGrid>
             </div>
             </td>
             </tr>
 </ItemTemplate>
 </telerik:GridTemplateColumn>
 </Columns>
 </MasterTableView>
 </telerik:RadGrid>
   </telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server" Width="100%">
 Same Code
 </telerik:RadPageView>
   </telerik:RadMultiPage>

[Nencho]

Hello Jonh,

Would you elaborate a bit more on your scenario and provide us with the declaration of the second RadGrid, if possible. In addition, please make sure that the two grid possess different IDs, in order to make sure that the logic in the CollapseExpand method would be executed properly.

Regards,
Nencho
Telerik