This is a migrated thread and some comments may be shown as answers.

[Solved] Parent vertical orientation + child horizontal orientation

7 Answers 254 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

Maxime asked on 18 Jun 2012, 03:09 PM

tabs.jpg

content.jpg

Hi,

I'm currently working with tabs. I saw on a forum post that it is impossible to change child orientation of tabs.
I made my own system of childs:

First, I have a ratabstrip wich is the main with 5 tabs( on the left)
This Radtabstrip have a multipage view. Inside it, i have 5 pages wich contain a radtabstrip. (on the top)
Each of this radtabstrip have a multipage view with 3,5,7 and 9 tabs.
See the attached picture "tabs" to see what i am talking about.

It's working fine when I select a left tab. My top tab change, and when I click on it, it display the appropriate content.
But when i select another tab, there is still the content of the other pages.
See the attached pictures "content".

2 questions :
Is it possible to make this more simple ?
How can I hide a multipage when I click on the left tabs ?

Many thanks for your help !

7 Answers, 1 is accepted

answered on 19 Jun 2012, 05:19 AM

Hi Maxime,

I also experienced the same behavior. As a workaround you can set the SelectedIndex of other RadMultiPages to -1 on TabClick event of each RadTabStrip as follows.

ASPX:

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

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

<telerik:RadTabStrip ID="RadTabStrip2" runat="server" MultiPageID="RadMultiPage2" ontabclick="RadTabStrip2_TabClick">

<Tabs>

.....

</Tabs>

</telerik:RadTabStrip>

</telerik:RadPageView>

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

<telerik:RadTabStrip ID="RadTabStrip3" runat="server" MultiPageID="RadMultiPage3" ontabclick="RadTabStrip3_TabClick" >

<Tabs>

.....

</Tabs>

</telerik:RadTabStrip>

</telerik:RadPageView>

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

<telerik:RadTabStrip ID="RadTabStrip4" runat="server" MultiPageID="RadMultiPage4" ontabclick="RadTabStrip4_TabClick" >

<Tabs>

.....

</Tabs>

</telerik:RadTabStrip>

</telerik:RadPageView>

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

<telerik:RadTabStrip ID="RadTabStrip5" runat="server" MultiPageID="RadMultiPage5" ontabclick="RadTabStrip5_TabClick" >

<Tabs>

.....

</Tabs>

</telerik:RadTabStrip>

</telerik:RadPageView>

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

<telerik:RadTabStrip ID="RadTabStrip6" runat="server" MultiPageID="RadMultiPage6" ontabclick="RadTabStrip6_TabClick">

<Tabs>

.....

</Tabs>

</telerik:RadTabStrip>

</telerik:RadPageView>

</telerik:RadMultiPage>

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

.....

</telerik:RadMultiPage>

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

.....

</telerik:RadMultiPage>

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

.....

</telerik:RadMultiPage>

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

.....

</telerik:RadMultiPage>

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

.....

</telerik:RadMultiPage>

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" Orientation="VerticalLeft">

<Tabs>

<telerik:RadTab Text="First" PageViewID="RadPageView1">

</telerik:RadTab>

<telerik:RadTab Text="Second" PageViewID="RadPageView2">

</telerik:RadTab>

<telerik:RadTab Text="Third" PageViewID="RadPageView3">

</telerik:RadTab>

<telerik:RadTab Text="Fourth" PageViewID="RadPageView4">

</telerik:RadTab>

<telerik:RadTab Text="Fifth" PageViewID="RadPageView5">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

C#:

protected void RadTabStrip2_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)

{

RadMultiPage3.SelectedIndex = -1;

RadMultiPage4.SelectedIndex = -1;

RadMultiPage5.SelectedIndex = -1;

RadMultiPage6.SelectedIndex = -1;

}

protected void RadTabStrip3_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)

{

RadMultiPage2.SelectedIndex = -1;

RadMultiPage4.SelectedIndex = -1;

RadMultiPage5.SelectedIndex = -1;

RadMultiPage6.SelectedIndex = -1;

}

protected void RadTabStrip4_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)

{

RadMultiPage2.SelectedIndex = -1;

RadMultiPage3.SelectedIndex = -1;

RadMultiPage5.SelectedIndex = -1;

RadMultiPage6.SelectedIndex = -1;

}

protected void RadTabStrip5_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)

{

RadMultiPage2.SelectedIndex = -1;

RadMultiPage3.SelectedIndex = -1;

RadMultiPage4.SelectedIndex = -1;

RadMultiPage6.SelectedIndex = -1;

}

protected void RadTabStrip6_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)

{

RadMultiPage2.SelectedIndex = -1;

RadMultiPage3.SelectedIndex = -1;

RadMultiPage4.SelectedIndex = -1;

RadMultiPage5.SelectedIndex = -1;

}

Hope this helps.

Thanks,
Princy.

answered on 19 Jun 2012, 07:59 AM

I made this, and when I click on the left tabs, it display correctly top tabs.
But when i click on top tabs to display the content, nothing happen.

Except the link of my application is modified like this when i click on top tabs :
xxxx/mypage.aspx --> xxxx/mypage.aspx#

Any idea ?
I already checked if the class name is the same that in the "inherit" parameter on the top of the ASPX page and it's ok.
CS :

protected void TAB_first_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)

{

MPG_secondContent.SelectedIndex = -1;

MPG_thirdContent.SelectedIndex = -1;

MPG_fourthContent.SelectedIndex = -1;

MPG_fifthContent.SelectedIndex = -1;

}

protected void TAB_second_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)

{

MPG_firstContent.SelectedIndex = -1;

MPG_thirdContent.SelectedIndex = -1;

MPG_fourthContent.SelectedIndex = -1;

MPG_fifthContent.SelectedIndex = -1;

}

protected void TAB_third_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)

{

MPG_firstContent.SelectedIndex = -1;

MPG_secondContent.SelectedIndex = -1;

MPG_fourthContent.SelectedIndex = -1;

MPG_fifthContent.SelectedIndex = -1;

}

protected void TAB_fourth_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)

{

MPG_firstContent.SelectedIndex = -1;

MPG_secondContent.SelectedIndex = -1;

MPG_thirdContent.SelectedIndex = -1;

MPG_fifthContent.SelectedIndex = -1;

}

protected void TAB_fifth_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)

{

MPG_firstContent.SelectedIndex = -1;

MPG_secondContent.SelectedIndex = -1;

MPG_thirdContent.SelectedIndex = -1;

MPG_fourthContent.SelectedIndex = -1;

}

ASPX :

<div id="topTabs">

<telerik:RadMultiPage ID="MPG_topTabs" runat="server" SelectedIndex="3">

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

<telerik:RadTabStrip ID="TAB_first" runat="server" Orientation="HorizontalTop" MultiPageID="MPG_firstContent" ontabclick="TAB_first_TabClick">

<Tabs>

<telerik:RadTab Text="One" Selected="true"></telerik:RadTab>

<telerik:RadTab Text="Two"></telerik:RadTab>

<telerik:RadTab Text="Three"></telerik:RadTab>

<telerik:RadTab Text="Four"></telerik:RadTab>

<telerik:RadTab Text="Five"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</telerik:RadPageView>

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

<telerik:RadTabStrip ID="TAB_second" runat="server" Orientation="HorizontalTop" MultiPageID="MPG_secondContent" ontabclick="TAB_second_TabClick">

<Tabs>

<telerik:RadTab Text="One"></telerik:RadTab>

<telerik:RadTab Text="Two"></telerik:RadTab>

<telerik:RadTab Text="Three"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</telerik:RadPageView>

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

<telerik:RadTabStrip ID="TAB_third" runat="server" Orientation="HorizontalTop" MultiPageID="MPG_thirdContent" ontabclick="TAB_third_TabClick">

<Tabs>

<telerik:RadTab Text="One"></telerik:RadTab>

<telerik:RadTab Text="Two"></telerik:RadTab>

<telerik:RadTab Text="Three"></telerik:RadTab>

<telerik:RadTab Text="Four"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</telerik:RadPageView>

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

<telerik:RadTabStrip ID="TAB_fourth" runat="server"

MultiPageID="MPG_fourthContent" ontabclick="TAB_fourth_TabClick"

SelectedIndex="2">

<Tabs>

<telerik:RadTab Text="One"></telerik:RadTab>

<telerik:RadTab Text="Two"></telerik:RadTab>

<telerik:RadTab Text="Three" Selected="True"></telerik:RadTab>

<telerik:RadTab Text="Four"></telerik:RadTab>

<telerik:RadTab Text="Five"></telerik:RadTab>

<telerik:RadTab Text="Six"></telerik:RadTab>

<telerik:RadTab Text="Seven"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</telerik:RadPageView>

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

<telerik:RadTabStrip ID="TAB_fifth" runat="server"

MultiPageID="MPG_fifthContent" ontabclick="TAB_fifth_TabClick">

<Tabs>

<telerik:RadTab Text="One"></telerik:RadTab>

<telerik:RadTab Text="Two"></telerik:RadTab>

<telerik:RadTab Text="Three"></telerik:RadTab>

<telerik:RadTab Text="Four"></telerik:RadTab>

<telerik:RadTab Text="Five"></telerik:RadTab>

<telerik:RadTab Text="Six"></telerik:RadTab>

<telerik:RadTab Text="Seven"></telerik:RadTab>

<telerik:RadTab Text="Eight"></telerik:RadTab>

<telerik:RadTab Text="Nine"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

<div id="leftTabs">

<telerik:RadTabStrip ID="TAB_leftTabs" runat="server"

Orientation="VerticalLeft" MultiPageID="MPG_topTabs"

SelectedIndex="3">

<Tabs>

<telerik:RadTab Text="First"></telerik:RadTab>

<telerik:RadTab Text="Second"></telerik:RadTab>

<telerik:RadTab Text="Third"></telerik:RadTab>

<telerik:RadTab Text="Fourth" Selected="True"></telerik:RadTab>

<telerik:RadTab Text="Fifth"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</div>

<div id="tabsContent">

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

<telerik:RadPageView ID="PGE_firstOne" runat="server" Width="100%">

First - One</telerik:RadPageView>

<telerik:RadPageView ID="PGE_firstTwo" runat="server" Width="100%">

First - Two</telerik:RadPageView>

<telerik:RadPageView ID="PGE_firstThree" runat="server" Width="100%">

First - Three</telerik:RadPageView>

<telerik:RadPageView ID="PGE_firstFour" runat="server" Width="100%">

First - Four</telerik:RadPageView>

<telerik:RadPageView ID="PGE_firstFive" runat="server" Width="100%">

First - Five</telerik:RadPageView>

</telerik:RadMultiPage>

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

<telerik:RadPageView ID="PGE_secondOne" runat="server" Width="100%">

Second - One</telerik:RadPageView>

<telerik:RadPageView ID="PGE_secondTwo" runat="server" Width="100%">

Second - Two</telerik:RadPageView>

<telerik:RadPageView ID="PGE_secondThree" runat="server" Width="100%">

Second - Three</telerik:RadPageView>

</telerik:RadMultiPage>

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

<telerik:RadPageView ID="PGE_thirdOne" runat="server" Width="100%">

Third - One</telerik:RadPageView>

<telerik:RadPageView ID="PGE_thirdTwo" runat="server" Width="100%">

Third - Two</telerik:RadPageView>

<telerik:RadPageView ID="PGE_thirdThree" runat="server" Width="100%">

Third - Three</telerik:RadPageView>

<telerik:RadPageView ID="PGE_thirdFour" runat="server" Width="100%">

Third - Three</telerik:RadPageView>

</telerik:RadMultiPage>

<telerik:RadMultiPage ID="MPG_fourthContent" runat="server" SelectedIndex="2">

<telerik:RadPageView ID="PGE_fourthOne" runat="server" Width="100%">

Fourth - One</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fourthTwo" runat="server" Width="100%">

Fourth - Two</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fourthThree" runat="server" Width="100%">

Fourth - Three</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fourthFour" runat="server" Width="100%">

Fourth - Four</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fourthFive" runat="server" Width="100%">

Fourth - Five</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fourthSix" runat="server" Width="100%">

Fourth - Six</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fourthSeven" runat="server" Width="100%">

Fourth - Seven</telerik:RadPageView>

</telerik:RadMultiPage>

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

<telerik:RadPageView ID="PGE_fifthOne" runat="server" Width="100%">

Fifth - One</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fifthTwo" runat="server" Width="100%">

Fifth - Two</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fifthThree" runat="server" Width="100%">

Fifth - Three</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fifthFour" runat="server" Width="100%">

Fifth - Four</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fifthFive" runat="server" Width="100%">

Fifth - Five</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fifthSix" runat="server" Width="100%">

Fifth - Six</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fifthSeven" runat="server" Width="100%">

Fifth - Seven</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fifthEight" runat="server" Width="100%">

Fifth - Eight</telerik:RadPageView>

<telerik:RadPageView ID="PGE_fifthNine" runat="server" Width="100%">

Fifth - Nine</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

Accepted

answered on 21 Jun 2012, 04:42 AM

Hi Maxime,

Try the following JavScript to achieve your scenario.

ASPX:

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

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

<telerik:RadTabStrip ID="TAB_first" runat="server" MultiPageID="MPG_firstContent" OnClientTabSelected="OnClientTabSelected1">

..............

</telerik:RadTabStrip>

</telerik:RadPageView>

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

<telerik:RadTabStrip ID="TAB_second" runat="server" MultiPageID="MPG_secondContent" OnClientTabSelected="OnClientTabSelected2">

..............

</telerik:RadTabStrip>

</telerik:RadPageView>

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

<telerik:RadTabStrip ID="TAB_third" runat="server" MultiPageID="MPG_thirdContent" OnClientTabSelected="OnClientTabSelected3">

..............

</telerik:RadTabStrip>

</telerik:RadPageView>

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

<telerik:RadTabStrip ID="TAB_fourth" runat="server" MultiPageID="MPG_fourthContent" OnClientTabSelected="OnClientTabSelected4" >

..............

</telerik:RadTabStrip>

</telerik:RadPageView>

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

<telerik:RadTabStrip ID="TAB_fifth" runat="server" MultiPageID="MPG_fifthContent" OnClientTabSelected="OnClientTabSelected5">

..............

</telerik:RadTabStrip>

</telerik:RadPageView>

</telerik:RadMultiPage>

JS:

<script type="text/javascript">

var MPG_firstContent;

var MPG_secondContent;

var MPG_thirdContent;

var MPG_fourthContent;

var MPG_fifthContent;

function pageLoad() {

MPG_firstContent = $find("<%=MPG_firstContent.ClientID%>");

MPG_secondContent = $find("<%=MPG_secondContent.ClientID%>");

MPG_thirdContent = $find("<%=MPG_thirdContent.ClientID%>");

MPG_fourthContent = $find("<%=MPG_fourthContent.ClientID%>");

MPG_fifthContent = $find("<%=MPG_fifthContent.ClientID%>");

}

function OnClientTabSelected1() {

MPG_secondContent.set_selectedIndex(-1);

MPG_thirdContent.set_selectedIndex(-1);

MPG_fourthContent.set_selectedIndex(-1);

MPG_fifthContent.set_selectedIndex(-1);

}

function OnClientTabSelected2() {

MPG_firstContent.set_selectedIndex(-1);

MPG_thirdContent.set_selectedIndex(-1);

MPG_fourthContent.set_selectedIndex(-1);

MPG_fifthContent.set_selectedIndex(-1);

}

function OnClientTabSelected3() {

MPG_firstContent.set_selectedIndex(-1);

MPG_secondContent.set_selectedIndex(-1);

MPG_fourthContent.set_selectedIndex(-1);

MPG_fifthContent.set_selectedIndex(-1);

}

function OnClientTabSelected4() {

MPG_firstContent.set_selectedIndex(-1);

MPG_secondContent.set_selectedIndex(-1);

MPG_thirdContent.set_selectedIndex(-1);

MPG_fifthContent.set_selectedIndex(-1);

}

function OnClientTabSelected5() {

MPG_firstContent.set_selectedIndex(-1);

MPG_secondContent.set_selectedIndex(-1);

MPG_thirdContent.set_selectedIndex(-1);

MPG_fourthContent.set_selectedIndex(-1);

}

</script>

Hope this helps.

Thanks,
Princy.