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

Parent vertical orientation + child horizontal orientation

7 Answers 194 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Maxime
Top achievements
Rank 1
Maxime asked on 18 Jun 2012, 03:09 PM
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

Sort by
0
Princy
Top achievements
Rank 2
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.
0
Maxime
Top achievements
Rank 1
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>
0
Accepted
Princy
Top achievements
Rank 2
answered on 20 Jun 2012, 03:43 AM
Hi Maxime,

Unfortunately I can't replicate the issue at my end. Please make sure that you are not getting any JavaScript errors.

Thanks,
Princy.
0
Maxime
Top achievements
Rank 1
answered on 20 Jun 2012, 08:03 AM
Hi !

Thank you for the answer.
I found the error :) Inside the master page, there was not any form with the tag runat="server".

Everything is working fine. Except that my CSS is not working on my master page anymore. I will check it and open a new post inside the good section if I am not able to discover it by myself.

Have a nice day ;)
0
Maxime
Top achievements
Rank 1
answered on 20 Jun 2012, 01:18 PM
I have a issue due to the functions above.
When i click on a top tab, i guess it reload the page. That is very slow ! Is there a way to access to the functions throught JavaScript ?

Many thanks.
0
Accepted
Princy
Top achievements
Rank 2
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.
0
Maxime
Top achievements
Rank 1
answered on 21 Jun 2012, 07:52 AM
Many thank ! Works perfectly :)
Tags
TabStrip
Asked by
Maxime
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Maxime
Top achievements
Rank 1
Share this question
or