Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Creating a ViewPort using Splitter and Tab Control

3 Answers 97 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Alin
Top achievements
Rank 1
Alin asked on 02 Feb 2009, 06:46 PM
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.

3 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 05 Feb 2009, 09:06 AM
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.
0
Michael
Top achievements
Rank 2
answered on 17 Mar 2009, 01:06 PM

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....
0
Tsvetie
Telerik team
answered on 20 Mar 2009, 09:24 AM
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.
Tags
Splitter
Asked by
Alin
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Michael
Top achievements
Rank 2
Tsvetie
Telerik team
Share this question
or