Layout of hierarchical tab

3 posts, 0 answers
  1. Sharon
    Sharon avatar
    9 posts
    Member since:
    Feb 2009

    Posted 10 Jun 2009 Link to this post

    I have a hierarchical tab with 3 levels, I want to have a custom layout for my tab structure.

    I want my tab structure this way, the first and second levels in horizontal direction,and the third level in vertical direction.

    Tab1 Tab2 Tab3 Tab4
    Tab1.1 Tab1.2 Tab1.3 Tab1.4 Tab1.5
    Tab1.1.1
    Tab1.1.2
    Tab1.1.3
    Tab1.1.4

    Could anyone please help me on this.

    Thanks,
    Sharon Johnson
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Jun 2009 Link to this post

    Hi Sharon,

    One suggestion will be to use a TabTemplate and place another RadTabStrip inside the TabTemplate of the child tab with desired Orientation.

    ASPX:
     
     
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Orientation="HorizontalTop"   > 
             
              <Tabs> 
                    <telerik:RadTab Text="Tab1"   > 
                        <Tabs> 
                            <telerik:RadTab Text="Tab1.1"
                            <TabTemplate > 
                            <div > 
                                <telerik:RadTabStrip ID="RadTabStrip2" runat="server"  Width="100px" Align="Left"  Orientation="VerticalRight" > 
                                  <Tabs > 
                                    <telerik:RadTab Text="Tab1.1.1" > 
                                    </telerik:RadTab> 
                                    <telerik:RadTab Text="Tab1.1.2"
                                    </telerik:RadTab> 
                                    <telerik:RadTab Text="Tab1.1.3"
                                    </telerik:RadTab> 
                                    <telerik:RadTab Text="Tab1.1.4"
                                    </telerik:RadTab> 
                                </Tabs> 
                                  
                                </telerik:RadTabStrip> 
                             </div>    
                            </TabTemplate> 
                                 
                            </telerik:RadTab> 
                            <telerik:RadTab Text="Tab1.2"
                            </telerik:RadTab> 
                            <telerik:RadTab Text="Tab1.3"
                            </telerik:RadTab> 
                            <telerik:RadTab Text="Tab1.4"
                            </telerik:RadTab> 
                        </Tabs> 
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Tab2"
                      
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Tab3"
                    </telerik:RadTab> 
                </Tabs> 
            </telerik:RadTabStrip> 
     


    Thanks
    Shinu
  3. Sharon
    Sharon avatar
    9 posts
    Member since:
    Feb 2009

    Posted 13 Jun 2009 Link to this post

    Hi,
    In my case the hierarchical tab structure is getting rendered from the database, and I have no clue on how to use tab template in this situation.

    Thanks,
    Sharon.
Back to Top