3rd Spillter at the right corner of the page

4 posts, 0 answers
  1. Priya
    Priya avatar
    144 posts
    Member since:
    Jul 2008

    Posted 26 Jan 2009 Link to this post

    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...
  2. Priya
    Priya avatar
    144 posts
    Member since:
    Jul 2008

    Posted 27 Jan 2009 Link to this post

    any idea.....
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Priya
    Priya avatar
    144 posts
    Member since:
    Jul 2008

    Posted 27 Jan 2009 Link to this post

    plz help me...
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 29 Jan 2009 Link to this post

    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.
Back to Top