TabStrip inside multipage

[Saeid Kdaimati]

I have a horizantal tabstrip with two tabs linked to a multi page, each multi page include a virtecal tabstrip linked to a multipage,
what I need is when user select a tab from the horizantal tabstrip only linked multipage to the tabstrip in the linked page view to be dispayed.

I wrote the following code but it keep hiding the first multipage only:

<

 

script>

 

 

function OnClientTabSelected(sender, eventArgs) {

 

 

var multiPage2 = $find("<%=RadMultiPage2.ClientID %>");

 

 

var multiPage3 = $find("<%=RadMultiPage3.ClientID %>");

 

 

var tab = eventArgs.get_tab();

 

 

var text = tab.get_text();

 

 

if (text = "Daily Profile") {

 

multiPage3.set_visible(

false);

 

multiPage2.set_visible(

true);

 

}

 

else {

 

multiPage3.set_visible(

true);

 

multiPage2.set_visible(

false);

 

}

}

</

 

script>

 

<

 

table cellpadding="0" cellspacing="0" width="970px">

 

 

<tr>

 

 

<td width="150">

 

 

&nbsp;

 

 

</td>

 

 

<td width="820">

 

 

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" Skin="Windows7"

 

 

MultiPageID="RadMultiPage1" OnClientTabSelected="OnClientTabSelected">

 

 

<Tabs>

 

 

<telerik:RadTab runat="server" Text="Daily Profile" Width="410px">

 

 

</telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="Immediate Profile" Width="410px">

 

 

</telerik:RadTab>

 

 

</Tabs>

 

 

</telerik:RadTabStrip>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td>

 

 

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">

 

 

<telerik:RadPageView ID="RadPageView1" runat="server" Selected="True">

 

 

<telerik:RadTabStrip ID="RadTabStrip2" runat="server" Orientation="VerticalLeft"

 

 

SelectedIndex="0" Skin="Windows7" Width="150px" MultiPageID="RadMultiPage2">

 

 

<Tabs>

 

 

<telerik:RadTab runat="server" Text="tab 1">

 

 

</telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="tab 2">

 

 

</telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="tab 3">

 

 

</telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="tab 4">

 

 

</telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="tab 5">

 

 

</telerik:RadTab>

 

 

</Tabs>

 

 

</telerik:RadTabStrip>

 

Daily

 

</telerik:RadPageView>

 

 

<telerik:RadPageView ID="RadPageView2" runat="server">

 

 

<telerik:RadTabStrip ID="RadTabStrip3" runat="server" Orientation="VerticalLeft"

 

 

SelectedIndex="0" Skin="Windows7" Width="150px" MultiPageID="RadMultiPage3">

 

 

<Tabs>

 

 

<telerik:RadTab runat="server" Selected="True" Text="tab 6">

 

 

</telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="tab 7">

 

 

</telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="tab 8">

 

 

</telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="tab 9">

 

 

</telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="tab 10">

 

 

</telerik:RadTab>

 

 

</Tabs>

 

 

</telerik:RadTabStrip>

 

Immediate

 

</telerik:RadPageView>

 

 

</telerik:RadMultiPage>

 

 

</td>

 

 

<td>

 

 

<telerik:RadMultiPage ID="RadMultiPage2" runat="server">

 

 

<telerik:RadPageView ID="RadPageView3" runat="server" Selected="true">

 

1

 

</telerik:RadPageView>

 

 

<telerik:RadPageView ID="RadPageView4" runat="server">

 

2

 

</telerik:RadPageView>

 

 

<telerik:RadPageView ID="RadPageView5" runat="server">

 

3

 

</telerik:RadPageView>

 

 

<telerik:RadPageView ID="RadPageView6" runat="server">

 

4

 

</telerik:RadPageView>

 

 

<telerik:RadPageView ID="RadPageView7" runat="server">

 

5

 

</telerik:RadPageView>

 

 

</telerik:RadMultiPage>

 

 

<telerik:RadMultiPage ID="RadMultiPage3" runat="server">

 

 

<telerik:RadPageView ID="RadPageView8" runat="server" Selected="true">

 

6

 

</telerik:RadPageView>

 

 

<telerik:RadPageView ID="RadPageView9" runat="server">

 

7

 

</telerik:RadPageView>

 

 

<telerik:RadPageView ID="RadPageView10" runat="server">

 

8

 

</telerik:RadPageView>

 

 

<telerik:RadPageView ID="RadPageView11" runat="server">

 

9

 

</telerik:RadPageView>

 

 

<telerik:RadPageView ID="RadPageView12" runat="server">

 

10

 

</telerik:RadPageView>

 

 

</telerik:RadMultiPage>

 

 

</td>

 

 

</tr>

 

</

 

table>

one thing more, I need to hide multipage3 on page load.

Thank you in advanced

 

[Princy]

Hello Saeid,

I found a small mistake in your code in checking the condition. You have used the assignment operator instead of comparison operator (==). That was the only issue I found.

 

Another option to achieve same appearance is by placing the MultiPage2 and MultiPage3 inside corresponding PageViews rather than placing it out side. In this approach, we dont need extra client code to setvisibility for the multipage controls. Consider this suggestion only if this not going to break your current Layout. :)

 

Thanks,
Princy.

[Saeid Kdaimati]

Thank you Princy, seems I forgot my coffee yesterday, it was really very obvious, but I did not notice it.

Thank you once again.