JavaScript not working with RadTabStrip asp.net

Question

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

The JavaScript 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 Code:

<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 CollapseExpand function compatibility with tabs.

Can someone help me with this?

Thanks.

Jason P · Accepted Answer · 2013-07-12 15:15:35Z

1

Couple things...

First, I don't see any jQuery, just plain javascript (not that that's your problem, just saying).

Second, <a href="javascript:collapseExpand('d1_<%# Eval("id1") %>');"> looks like it should be <a href="javascript:collapseExpand('id1_<%# Eval("id1") %>');"> (d1_ vs id1_).

Third, I don't think your code to change the image will work.

Let's say <%# Eval("id1") %> is 4. So the div's id would be id1_4. That means var imageID = document.getElementById('image' + obj); would set imageID to imageid1_4, when the actual id of your image is imageSubId_4.

answered Jul 12, 2013 at 15:15

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Huzaifa Over a year ago

Yes,its Java Script. And d1 was a spelling mistake don't worry about it.

Huzaifa Over a year ago

Also, I agree the Image would not change but when I was clicking on that image it was expanding and collapsing which is not happening since i shifted to radtabstrip.

Jason P Over a year ago

Do you see any errors in your browser console? If you view the source of the page or inspect the inner grid, is the data there as you would expect?

Huzaifa Over a year ago

Yes data is correct for parent and child gridviews. The only thing is the view is not as expected. I mean I am seeing symbols like " >" and when I click on them nothing is happening.

Jayesh Goyani · Accepted Answer · 2013-07-17 09:56:06Z

Sorry for late reply.

Please try with the below code snippet.

JS

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

            if (gvObject.style.display == "none") {
                gvObject.style.display = "inline";
                imageID.src = "http://www.fimfiction-static.net/images/icons/collapse.png";
            }
            else {
                gvObject.style.display = "none";
                imageID.src = "http://jlpa.trinitylaban.ac.uk/WebCat_Images/English/Other/MiscD/admin-icon-expand.png";
            }
        }
    </script>

ASPX

    <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"
                    OnNeedDataSource="GridView1_NeedDataSource">
                    <MasterTableView DataKeyNames="ID">
                        <Columns>
                            <telerik:GridTemplateColumn>
                                <ItemTemplate>
                                    <a onclick="javascript:collapseExpand('<%# Eval("ID") %>');">
                                        <img id="imageSubId_<%# Eval("ID") %>" alt="Click to show/hide orders" src="http://jlpa.trinitylaban.ac.uk/WebCat_Images/English/Other/MiscD/admin-icon-expand.png" />
                                    </a>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="ID" HeaderText="ID" />
                            <telerik:GridTemplateColumn>
                                <ItemTemplate>
                                    <tr>
                                        <td colspan="100%">
                                            <div id="div_<%# Eval("ID") %>" style="display: none; position: relative; left: 25px;">
                                                <telerik:RadGrid ID="GridView2" runat="server" AutoGenerateColumns="false" CellPadding="4"
                                                    ForeColor="#333333" GridLines="None" OnNeedDataSource="GridView1_NeedDataSource">
                                                    <MasterTableView>
                                                        <Columns>
                                                            <telerik:GridBoundColumn DataField="Name" HeaderText="First 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>

ASPX.CS

protected void GridView1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    dynamic data = new[] {
        new { ID = 1, Name ="Name1"},
        new { ID = 2, Name = "Name2"},
        new { ID = 3, Name = "Name3"},
         new { ID = 4, Name = "Name4"},
        new { ID = 5, Name = "Name5"}
    };

    (sender as RadGrid).DataSource = data;
}

Let me know if any concern.

Collectives™ on Stack Overflow

JavaScript not working with RadTabStrip asp.net

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related