This is a migrated thread and some comments may be shown as answers.

3rd Spillter at the right corner of the page

3 Answers 70 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

Priya asked on 27 Jan 2009, 05:01 AM

Sir,

My page is divided into three parts vertically..For this i used spiltters.First splitter is used for menu on left side of the page which is done by the master page as given below
In master page.aspx

    
                html, body, form  
        
                {  
        
                    height: 100%;  
        
                    overflow: hidden;  
        
                    margin: 0px;  
        
                    padding: 0px;  
        
                }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="ScriptManager2" runat="server" /> 
        
                    <div id='Div1' style="margin: 0 auto; width: 100%; height: 100%; background-color: #FFFFFF;  
        
                        overflow: hidden; border: 1px"> 
        
                        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" 
        
                            Style="background-color: #FFFFFF; border: 1px !important">  
        
                            <telerik:RadPane ID="LeftPane" runat="server" Width="100%" Height="100%">  
        
                                <div>  
        
                                    <div>  
        
                                        <telerik:RadAjaxPanel runat="server" ID="radajaxpanelmenu" Width="100%">  
        
                                            <telerik:RadPanelBar PersistStateInCookie="true" runat="server" ID="RadPlBMasterMenu">  
        
                                                <ItemTemplate> 
        
                                                    <asp:Label ID="Label1" runat="server" Text="Menu"></asp:Label> 
        
                                                </ItemTemplate> 
        
                                                <Items> 
        
                                                    <telerik:RadPanelItem runat="server" Text="test">  
        
                                                    </telerik:RadPanelItem> 
        
                                                </Items> 
        
                                                <CollapseAnimation Duration="100" Type="None" /> 
        
                                                <ExpandAnimation Duration="100" Type="InBounce" /> 
        
                                            </telerik:RadPanelBar> 
        
                                        </telerik:RadAjaxPanel> 
        
                                    </div> 
        
                                </div> 
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Forward" Height="100%" 
        
                                Width="100%" /> 
        
                            <telerik:RadPane ID="MiddlePaneMaster" runat="server" Width="100%" Scrolling="none" Height="100%">  
        
                                <div id="Div2" style="width: 100%">  
        
                                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">  
        
                                    </asp:ContentPlaceHolder> 
        
                                </div> 
        
                                <!--rightcontent--> 
        
                            </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                    </div> 
        
                </form> 
        
            </body> 
        
            </html>

In content page,I divided the content page spitter into two parts(middlepane,rightpane),the problem is i want to put the last division ie ,rightpane, in the right most part of the page.Now its shown in the middle of the page ..

    
            <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">  
        
                <telerik:RadSplitter ID="RadSplitter2" runat="server" CssClass="Office2007" Width="100%" 
        
                    Orientation="vertical">  
        
                    <telerik:RadPane ID="MiddlePane" runat="server" Width="98%" Style="float: left;">  
        
                        <div style="border: none;">  
        
                            <asp:Label runat="server" Text="PaneMiddle"></asp:Label> 
        
                        </div> 
        
                    </telerik:RadPane> 
        
                    <telerik:RadSplitBar ID="Radsplitbar3" runat="server" CollapseMode="backward" /> 
        
                    <telerik:RadPane ID="RightPane" runat="server" Style="float: right">  
        
                        <telerik:RadSlidingZone ID="SlidingZone1" runat="server" ClickToOpen="true" SlideDirection="left">  
        
                            <telerik:RadSlidingPane ID="Contacts" Title="Filter" runat="server">  
        
                                <div> 
        
                                    <asp:Label ID="Label1" runat="server" Text="PaneRight"></asp:Label> 
        
                                </div> 
        
                            </telerik:RadSlidingPane> 
        
                        </telerik:RadSlidingZone> 
        
                    </telerik:RadPane> 
        
                </telerik:RadSplitter> 
        
            </asp:Content>

I thk my code wil explain wht i really mean..In short

I want to show the middlepane fully stretched.and the right pane shuld be visible only when i click on it,then on tht time the middlepane should adjust its width to include the rightpane also..
If u just cut and paste my code u can see the probm

Plz help me....

Thanks in advance...

3 Answers, 1 is accepted

answered on 29 Jan 2009, 03:26 PM

radsplitterlayout.zip

Hi Priya,

I built up a test demo based on your code and after that I modified it in the manner I assume you want it to look. Please, note that this layout is standard and you can find examples on how to build such in the online demos of the RadSplitter which are placed in the following location:

http://demos.telerik.com/aspnet-ajax/Splitter/Examples/Overview/DefaultCS.aspx

Sincerely yours,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.