Jquery not working with RadTabStrip asp.net

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

    Posted 12 Jul 2013 Link to this post

     I have a javascript for a nested grid which was working fine until I decided to use RadTabStrip.

    The Jquery Code:

    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"> </script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">     </script>
     <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";
        }
    }
    </script>
    </asp:content>

    RadTab Script:

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server">
    <Tabs> 
    <telerik:RadTab  runat="server" Text="tab1">
    <TabTemplate>
    <telerik:RadGrid ID="GridView1" runat="server" AutoGenerateColumns="False" 
        BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" 
        CellPadding="3" GridLines="Horizontal" OnItemDataBound="RadGrid2_ItemDataBound" >
    <MasterTableView DataKeyNames="id1">
    <Columns>
    <telerik:GridTemplateColumn>
    <ItemTemplate>
    <a href="javascript:collapseExpand('id1_<%# Eval("id1") %>');">
    <img id="imageSubId_<%# Eval("id1") %>" alt="Click to show/hide orders" border="0" src="Images/bullet_toggle_plus.jpg" />
    </a>
    </ItemTemplate>
    </telerik:GridTemplateColumn>
    <telerik:GridBoundColumn DataField="id1" HeaderText="ID"/>
    <telerik:GridTemplateColumn>
    <ItemTemplate>
                <tr>
                <td colspan="100%">
                <div id="id1_<%# Eval("id1") %>" style="display: none; position: relative; left: 25px;">
                <telerik:RadGrid ID="GridView2" runat="server" AutoGenerateColumns="false" CellPadding="4" ForeColor="#333333" 
                        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"  />
                        </HeaderTemplate>
                        </telerik:GridTemplateColumn>
                        </Columns>
                        </MasterTableView >
                 </telerik:RadGrid>
                 </div>
                 </td>
                 </tr>
     </ItemTemplate>
     </telerik:GridTemplateColumn>
     </Columns>
     </MasterTableView>
     </telerik:RadGrid>
     </TabTemplate>
     </telerik:RadTab>
     </Tabs>
     </telerik:RadTabStrip>

    This code is working fine without tabs.

    Also, I think the problem is with the RadTabStrip rather than JavaScript. I tested it numerously without using RadTabStrip and its working fine. As soon as I attach radtabstrip its behaving like this.

    Can someone help me with this?

    Thanks.

Back to Top