Open a tab through another tab content

[Nimesha]

I am new to RadTabStrip, ann came across something that need your help. 

I am using RadTabStrip with RadMultiPage. I open new aspx files for each of the Tabs.
Now I need to add a button to the first Tab, which will load the second tab and display it's content. (Just like, any other link which will open the requested link).

But when  I give the implement the onclick event of the button to navigate to the second aspx file (Booking.aspx), it will simply load another Tabstrip inside the first Tab. It results in showing the radtadsrip again inside the first tab. 

Please help me to open the second tab using the button, in the same way as if it is navigated by clicking on the second tab.

Below is my aspx file: 
  <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Web20" MultiPageID="RadMultiPage1"
            SelectedIndex="0" Align="Justify" ReorderTabsOnSelect="true" Width="800px">
            <Tabs>
                <telerik:RadTab Text="DashBoard">
                </telerik:RadTab>
                <telerik:RadTab Text="Booking">
                </telerik:RadTab>              
            </Tabs>
        </telerik:RadTabStrip>       
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" CssClass="pageView"
            Width="800px" Height="520px">
            <telerik:RadPageView ID="RadPageView1" runat="server" Width="100%" Height="100%">
                <iframe frameborder="0" width='800' height='520' scrolling="yes" src="Dashboard.aspx">
                </iframe>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView5" runat="server" Width="100%" Height="100%">
                <iframe frameborder="0" width='800' height="100%" scrolling="yes" src="Booking.aspx">
                </iframe>
            </telerik:RadPageView>         
        </telerik:RadMultiPage>


Thanks,
Nimesha

[Cori]

Hello Nimesha,

Just handle the button's click event and using the client-side api of the RadTabStrip select the tab you want.

You can refer to the following help documentation to find your answer: 

http://www.telerik.com/help/aspnet-ajax/tabstrip-client-side-radtabstrip.html

But this should suffice:

$find("<%=RadTabStrip1.ClientID%>").findTabByValue("SecondTab").select();

Just place that in your button' client-side click event and it should navigate to your second tab. You'll need to set a value on your second tab, so it can find it.

I hope that helps.

[Nimesha]

Thanks Cori.
But unfortunately I am not able to use the suggested method.

I have the RadTabStrip in a sepearate page.
That is ;

• RadTabStrip is in "ClientManager.aspx"
• Through this I call Dashboard.aspx.aspx , Booking.aspx etcc inside the RadMultiPageView
• I have a button placed in the DashBoard.aspx, which should Select the Booking.aspx tab and show it

When I use the suggested method in the button client click, it is not able to find the RadTabStrip, as it is not in the same page. Is there a way for me to find the RadTabStrip existsing in the "ClientManager.aspx"?

Thanks,
Nimesha

[Cori]

Hello Nimesha,

In that case you'll need to use the optional parameter for the $find method. I'm assuming the other page is rendered in an iFrame on the other page, so if you do something like this:

$find("RadTabStrip1",window.top.document).findTabByValue("SecondTab").select();

You'll need to replace "RadTabStrip1" with the full ClientID that gets rendered to the browser for the RadTabStrip on your ClientManager.aspx page, in order for it to find the control.

I hope that helps.

[Nimesha]

Thanks Cori,
But still no luck.
I tried :

$find("ctl00_ContentPlaceHolder1_RadTabStrip1").findTabByValue("1").select()

I ran the firebug debuggr and found out that the find returns a null for $find("ctl00_ContentPlaceHolder1_RadTabStrip1"), which means that the object is not there.

When I run the script on the debugger manually, it returns a value. I am confused on what I am doing wrong here :(

[Dimitar Terziev]

Hello Nimesha,

Could you try the following implementation of the on click event handler function:

var tabstrip = window.top.$find("ctl00_ContentPlaceHolder1_RadTabStrip1");

       tabstrip.findTabByValue("1").select();

This way you should be able to reference the RadTabStrip and select the appropriate tab.

Kind regards,
Dimitar Terziev
the Telerik team

[Nimesha]

Thanks Dimitar.

It did the trick.
I am calling the method mentioned by you through the OnClientClick and had implemented the OnClick event of the button to redirect to the required page (By using Response,Redirect)

Now the tab is getting selected, but the content is not displaying, a blank page is shown.
But when I debug, the page_load event is stepped on and the data loading is happening. Any idea why the content is not shown?

Note :I had used the RenderSelectedPageOnly="true" and AutopostBack="true". I thought that this might be the reason for the content not showing. So, I removed these attributes and checked. The result is the same.

Can you please help me to figure out why the content is not showing?
Thanks.
Nimesha

[Dimitar Terziev]

Hi Nimesha,

Please remove the RenderSelectedPageOnly="true" and AutopostBack="true" properties and change the click event handling function to the following:

var tabstrip = window.top.$find("ctl00_ContentPlaceHolder1_RadTabStrip1");

tabstrip.findTabByValue("1").select();

var pageview = tabstrip.findTabByValue("1").get_pageView();

pageview.select();

This way you should be able to switch between the tabs and the corresponding pageviews.

All the best,
Dimitar Terziev
the Telerik team

[Nimesha]

Hi Dimitar,

Thanks again for the solution. It works when I implement the code you had mentioned in the clientclick event.
I removed the code behind redirection of the button too.

As you had suggested it works fine when I remove the  RenderSelectedPageOnly="true" and AutopostBack="true". But I need the tabs to load only when clicked, because the content area of a tab, should get updated, once data is updated on another tab (That is, Once a booking is made through the "Bookings" tab, it should reflect in the "DashBoard" tab, content area grid). If I remove the RenderSelectedPageOnly="true" and AutopostBack="true" properties, I can not accomplish my requirement. 

Is there a way to refresh other tabs, without using  the RenderSelectedPageOnly="true" and AutopostBack="true"? 
Please do let me know. Your reply is highly appreciated.

Thanks,
Nimesha

[Dimitar Terziev]

Hello Nimesha,

For your scenario it's better to use RenderSelectedPageOnly="true" and AutopostBack="true" as you were using in the first place. So in order to achieve the desired functionality you should make a post-back once a booking is made and change the selected tab and pageview form the server-side.

I've prepared a sample page where a post-back is initiated from a javascript function and the selected tab and pageview are changes from the code-behind.

Kind regards,
Dimitar Terziev
the Telerik team