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

splitter with grid

4 Answers 109 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Patrick Lane
Top achievements
Rank 1
Patrick Lane asked on 15 Apr 2009, 11:57 AM
I am using Q3 2008 controls

I have aspx page as follows:

splitter with height set to 100%
sliding zone containing sliding pane1, which contains a user_control1
split bar
pane2 which contains user_control2, scrolling is disabled

user_control2 contains a radgrid which lots of columns, therefore exceeds the available width

I get two problems:

1) the horizontal scrollbar of the grid does not display
2) the height of both panes (sliding and fixed) is restricted to the height of the grid

I dont get these problems if the grid has only a few columns and can fit in the width of pane2

any suggestions ?

thanks, patrick

4 Answers, 1 is accepted

Sort by
0
Stuart Hemming
Top achievements
Rank 2
answered on 15 Apr 2009, 03:36 PM
Patrick,

Just a stab in the dark;

> 1) the horizontal scrollbar of the grid does not display

Have you set the Grid to allow scrolling?

<ClientSettings> 
  <Scrolling AllowScroll="true" /> 
</ClientSettings> 
 
--
Stuart
0
Svetlina Anati
Telerik team
answered on 16 Apr 2009, 03:12 PM
Hello Patrick,

In case you still experience the problem, please prepare a sample, fully runnable reproduction demo (use Northwind or a fake datasource for the grid), open a new support ticket and send it to us. Please, also include detailed explanations and some screenshots with the actual and the desired behavior marked. Once we have a better understanding on your exact configuration and requirements, we will do our best to help.


All the best,
Svetlina
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.
0
Patrick Lane
Top achievements
Rank 1
answered on 17 Apr 2009, 02:22 AM
Hi Svetlina

To keep it nice and simple I have just created a splitter and added in some Telerik controls. Code is below. Run this and you should see my problem: the splitter sizes itself to the height of the contents, not to the 100% height I have specified.

Some other problems I have found:

(1) In VS2005 I cannot specify the height of the pane through the designer properties window. The code-behind contains Height=" ".
(2) The following statement in the help topic is not true. If no height or width is specified for the splitter or panes then default values of 400px are applied to both dimensions of the splitter.
  • Free size - When you do not set the Width or Height property, the size of the splitter or pane is calculated automatically. Use this option when you don't need absolute size control or you want a pane to allocate all of the free size when the splitter is resized:
    • When you use free size on a splitter control, the splitter size is calculated automatically from the browser (or container) when the control is rendered.
    • When you use free size on a pane control, the splitter calculates the pane size based on what space is remaining after allocating space to absolutely-sized or percent-sized panes. If all panes are free-sized, then they all start initially the same siz

    •
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="template.aspx.vb" Inherits="PROSPERO_VS.template" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
     
    <head runat="server">  
        <title>Untitled Page</title> 
    </head> 
    <script type="text/javascript">  
    </script> 
    <body style="height:100%;margin:0px" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">  
        <form id="form1" runat="server" style="height:100%;margin:0px" > 
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            </telerik:RadScriptManager>          
            <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">  
                <tr height="100%" > 
                    <td height="100%" valign="top">  
                        <telerik:RadSplitter ID="RadSplitter1" runat="server" Skin="Gray" Height="100%" Width="100%" > 
                            <telerik:RadPane ID="RadPane1" runat="server" Height="100%"  > 
                                <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server">  
                                    <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Go to" Width="250px">  
                                        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Gray">  
                                            <CollapseAnimation Duration="100" Type="None" /> 
                                            <Items> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem4">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem5">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem6">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem7">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem8">  
                                                </telerik:RadPanelItem> 
                                            </Items> 
                                            <ExpandAnimation Duration="100" Type="None" /> 
                                        </telerik:RadPanelBar> 
                                    </telerik:RadSlidingPane> 
                                </telerik:RadSlidingZone></telerik:RadPane> 
                            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" /> 
                            <telerik:RadPane ID="RadPane2" runat="server" Height="100%" > 
                                <telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Gray">  
                                    <Nodes> 
                                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">  
                                            <Nodes> 
                                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">  
                                                </telerik:RadTreeNode> 
                                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">  
                                                </telerik:RadTreeNode> 
                                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">  
                                                </telerik:RadTreeNode> 
                                            </Nodes> 
                                        </telerik:RadTreeNode> 
                                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2">  
                                            <Nodes> 
                                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">  
                                                </telerik:RadTreeNode> 
                                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">  
                                                </telerik:RadTreeNode> 
                                            </Nodes> 
                                        </telerik:RadTreeNode> 
                                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode3">  
                                            <Nodes> 
                                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">  
                                                </telerik:RadTreeNode> 
                                            </Nodes> 
                                        </telerik:RadTreeNode> 
                                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode4">  
                                        </telerik:RadTreeNode> 
                                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode5">  
                                        </telerik:RadTreeNode> 
                                    </Nodes> 
                                </telerik:RadTreeView> 
                            </telerik:RadPane> 
                        </telerik:RadSplitter> 
     
                    </td> 
                </tr> 
            </table> 
        </form> 
    </body> 
    </html> 
    0
    Svetlina Anati
    Telerik team
    answered on 21 Apr 2009, 11:51 AM
    Hi Patrick,

    When you set the RadSplitter's size in percentages, you should explicitly set all its parent elements height explicitly in order to let it calculate its size. his being said, please include the following style in your page's head:

      <style type="text/css">
        html, body, form
        {
           height: 100%;
           margin: 0;
           padding: 0;
        }
        </style>

    You can also find information about this below:

    http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/defaultcs.aspx

    On a side note, you should set Width="22" to the RadPane which holds the RadSlidingZone because otherwise you will get incorrect resizing when docking/undocking the sliding panes.


    Greetings,
    Svetlina
    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
    Patrick Lane
    Top achievements
    Rank 1
    Answers by
    Stuart Hemming
    Top achievements
    Rank 2
    Svetlina Anati
    Telerik team
    Patrick Lane
    Top achievements
    Rank 1
    Share this question
    or