Creating a ViewPort using Splitter and Tab Control

4 posts, 0 answers
  1. Alin
    Alin avatar
    1 posts
    Member since:
    Feb 2009

    Posted 02 Feb 2009 Link to this post

    Hi,

    I'm trying to create a ViewPort as the one http://examples.coolite.com/.

    Had anyone succeded to do it using Spliiter and Tab Control? Can you give me some directions? Thank you!

    I think that Telerik should create such a control because is very usefull.
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 05 Feb 2009 Link to this post

    Hello Alin,

    There is no problem to use RadTabStrip in integration with RadSplitter - please start your implementation and in case you encounter a particular problem, do not hesitate to contact us with more specific information about the issue.

    Regards,
    Svetlina
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    2 posts
    Member since:
    Nov 2007

    Posted 17 Mar 2009 Link to this post

    I am trying to create very complex layout with splitter & tabstrip but has many troubles :(.
    So I try to post my problems step by step:

    the main thing is that all layout is making in runtime so I cannot post you real problem code, but I create simple examples that doesn't work at all.

    First:
    Perpose: Create simple content pane & left zone

    <body> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="true">  
        </telerik:RadScriptManager> 
          
        <asp:Table ID="Header" runat="server" CellPadding="0" CellSpacing="0"   
            Height="30px" Width="100%" BackColor="Lime">  
            <asp:TableRow> 
                <asp:TableCell HorizontalAlign="Center">  
                This is Header  
                </asp:TableCell> 
            </asp:TableRow> 
        </asp:Table> 
          
        <div> 
          
            <telerik:RadSplitter ID="MainSplitter" Runat="server" BorderStyle="None"   
                Height="100%" Width="100%" HeightOffset="30" > 
                  
                <telerik:RadPane ID="ContentPane" Runat="server">  
                  
                    <telerik:RadSplitter ID="ContentPaneSplitter" Runat="server" Height="100%" Width="100%">  
                          
                        <telerik:RadPane ID="LeftZone" Runat="server" Width="40%">  
                              
                            <asp:Table ID="Table1" runat="server" CellPadding="0" CellSpacing="0"   
                                Height="30px" Width="100%" BackColor="Gray">  
                                <asp:TableRow> 
                                    <asp:TableCell HorizontalAlign="Center">  
                                        This is Zone Header  
                                     </asp:TableCell> 
                                </asp:TableRow> 
                            </asp:Table> 
                              
                            <telerik:RadSplitter ID="ChildZoneSplitter" Runat="server" BorderStyle="None"   
                                Height="100%" Width="100%" HeightOffset="30" > 
                                  
                                <telerik:RadPane ID="ChildContentPane" Runat="server">  
                                  
                                    <asp:Table ID="ChildContentData" runat="server" CellPadding="0" CellSpacing="0"   
                                        Height="100%" Width="100%" BackColor="Yellow">  
                                        <asp:TableRow> 
                                             <asp:TableCell HorizontalAlign="Center">  
                                                    This is Child ConentData  
                                             </asp:TableCell> 
                                        </asp:TableRow> 
                                    </asp:Table> 
                                      
                                </telerik:RadPane> 
                                  
                            </telerik:RadSplitter> 
                        </telerik:RadPane> 
                          
                        <telerik:RadSplitBar ID="RadSplitBar1" Runat="server" /> 
                          
                        <telerik:RadPane ID="ContentZone" Runat="server">  
                            <asp:Table ID="ContentData" runat="server" CellPadding="0" CellSpacing="0"   
                                Height="100%" Width="100%" BackColor="Blue">  
                                <asp:TableRow> 
                                    <asp:TableCell HorizontalAlign="Center">  
                                        This is ConentData  
                                    </asp:TableCell> 
                                </asp:TableRow> 
                            </asp:Table> 
                        </telerik:RadPane> 
                          
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
          
        </div> 
        </form> 
    </body> 

    Result in IE7

    to be continued....
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 20 Mar 2009 Link to this post

    Hi Michael,
    Below are my recommendations:
    1. You have to set the height of all parent elements of the RadSplitter so that the control shows as expected in all supported browsers. Please refer to our Resize with Window online demo for additional information. In short, you have to add the following style to the HEAD of your page and remove the DIV element, wrapping the RadSplitter:
      <style type="text/css"
      html, body, form 
          height:100%; 
          margin:0px
          padding:0px
          overflow:hidden
      </style> 
    2. Remove the outermost RadSplitter with ID=MainSplitter in case you do not need it. From the code you have provided, I can see that this splitter has a single RadPane and it does not change the layout of the page. I only mention this, because an additional nested splitter that you do not actually need would lead to an unnecessary increase in the time for resize operations.
    3. In case you would like to remove the borders of the RadSplitter, please use BorderSize="0" instead of BorderStyle="None".
    4. Set Scrolling="None" for the RadPanes that have a RadSplitter as a child.
    5. Remove the Width and Height settings of the RadSplitter with ID=ContentPaneSplitter as by default, a nested RadSplitter becomes as high and as wide as its parent RadPane and resizes with it. You can control this behavior with the ResizeWithParentPane property of the RadSplitter - its default value is "true".
    6. Set ResizeWithParentPane="false" for the RadSplitter with ID=ChildZoneSplitter as it should not become as high as its parent RadPane.
    Below is your code, updated with the above suggestions:
    <head runat="server"
        <title>Untitled Page</title> 
        <style type="text/css"
        html, body, form 
        { 
            height:100%; 
            margin:0px; 
            padding:0px; 
            overflow:hidden; 
        } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            </telerik:RadScriptManager> 
            <asp:Table ID="Header" runat="server" CellPadding="0" CellSpacing="0" Height="30px" 
                Width="100%" BackColor="Lime"
                <asp:TableRow> 
                    <asp:TableCell HorizontalAlign="Center">   
                This is Header   
                    </asp:TableCell> 
                </asp:TableRow> 
            </asp:Table> 
            <telerik:RadSplitter ID="MainSplitter" runat="server" BorderSize="0" Height="100%" 
                Width="100%" HeightOffset="30"
                <telerik:RadPane ID="ContentPane" runat="server" Scrolling="None"
                    <telerik:RadSplitter ID="ContentPaneSplitter" runat="server"
                        <telerik:RadPane ID="LeftZone" runat="server" Width="40%" Scrolling="None"
                            <asp:Table ID="Table1" runat="server" CellPadding="0" CellSpacing="0" Height="30px" 
                                Width="100%" BackColor="Gray"
                                <asp:TableRow> 
                                    <asp:TableCell HorizontalAlign="Center">   
                                        This is Zone Header   
                                    </asp:TableCell> 
                                </asp:TableRow> 
                            </asp:Table> 
                            <telerik:RadSplitter ID="ChildZoneSplitter" runat="server" BorderSize="0" Height="100%" 
                                Width="100%" HeightOffset="30" ResizeWithParentPane="false"
                                <telerik:RadPane ID="ChildContentPane" runat="server"
                                    <asp:Table ID="ChildContentData" runat="server" CellPadding="0" CellSpacing="0" Height="100%" 
                                        Width="100%" BackColor="Yellow"
                                        <asp:TableRow> 
                                            <asp:TableCell HorizontalAlign="Center">   
                                                    This is Child ConentData   
                                            </asp:TableCell> 
                                        </asp:TableRow> 
                                    </asp:Table> 
                                </telerik:RadPane> 
                            </telerik:RadSplitter> 
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" /> 
                        <telerik:RadPane ID="ContentZone" runat="server"
                            <asp:Table ID="ContentData" runat="server" CellPadding="0" CellSpacing="0" Height="100%" 
                                Width="100%" BackColor="Blue"
                                <asp:TableRow> 
                                    <asp:TableCell HorizontalAlign="Center">   
                                        This is ConentData   
                                    </asp:TableCell> 
                                </asp:TableRow> 
                            </asp:Table> 
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </form> 
    </body> 

    or without the outermost RadSplitter:
    <%--<telerik:RadSplitter ID="MainSplitter" runat="server" BorderSize="0" Height="100%" 
        Width="100%" HeightOffset="30"
        <telerik:RadPane ID="ContentPane" runat="server" Scrolling="None">--%> 
            <telerik:RadSplitter ID="ContentPaneSplitter" runat="server" BorderSize="0" Height="100%" 
                Width="100%" HeightOffset="30"


    All the best,
    Tsvetie
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top