Parent vertical orientation + child horizontal orientation

8 posts, 2 answers
  1. Maxime
    Maxime avatar
    37 posts
    Member since:
    May 2012

    Posted 18 Jun 2012 Link to this post

    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 !
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Jun 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maxime
    Maxime avatar
    37 posts
    Member since:
    May 2012

    Posted 19 Jun 2012 Link to this post

    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>
  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Jun 2012 Link to this post

    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.
  6. Maxime
    Maxime avatar
    37 posts
    Member since:
    May 2012

    Posted 20 Jun 2012 Link to this post

    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 ;)
  7. Maxime
    Maxime avatar
    37 posts
    Member since:
    May 2012

    Posted 20 Jun 2012 Link to this post

    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.
  8. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Jun 2012 Link to this post

    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.
  9. Maxime
    Maxime avatar
    37 posts
    Member since:
    May 2012

    Posted 21 Jun 2012 Link to this post

    Many thank ! Works perfectly :)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017