JavaScript not working for second Tab/RadTab

2 posts, 0 answers
  1. John
    John avatar
    7 posts
    Member since:
    Jul 2013

    Posted 29 Jul 2013 Link to this post

    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>
  2. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 01 Aug 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top