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

docking to right

5 Answers 95 Views

Splitter

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

ehsan asked on 29 Jul 2009, 11:27 AM

    
            <head runat="server"> 
        
                <title></title> 
        
                <style> 
        
            html,body { 
        
                margin:0; 
        
                padding:0; 
        
                height:100%; /* needed for container min-height */ 
        
            } 
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <div style="height:100%;">  
        
                            <telerik:RadSplitter ID="RadSplitter_Main" runat="server" Orientation="Vertical" Height="100%" Width ="100%" Skin="Office2007"> 
        
                                <telerik:RadPane ID="RadPane_left" runat="server" Scrolling="None" Width="100%"> 
        
                                                 4444444444444444444444444444444444444444444 
        
                                </telerik:RadPane> 
        
                                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode ="None"    /> 
        
                                <telerik:RadPane ID="RadPane_menu" runat="server" Scrolling="None" Width="50px"> 
        
                                    <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" ExpandedPaneId="RadSlidingPane1" SlideDirection="Left"> 
        
                                        <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Menu1" Scrolling="None" EnableDock ="true" > 
        
                                            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Office2007"> 
        
                                                <Items> 
        
                                                    <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1"> 
        
                                                    <Items > 
        
                                                    <telerik:RadPanelItem  Text ="123" ></telerik:RadPanelItem> 
        
                                                    </Items> 
        
                                                    </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> 
        
                                                </Items> 
        
                                            </telerik:RadPanelBar> 
        
                                        </telerik:RadSlidingPane> 
        
                                        <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Title="Menu2" Scrolling="None"> 
        
                                        </telerik:RadSlidingPane> 
        
                                    </telerik:RadSlidingZone> 
        
                                </telerik:RadPane> 
        
                            </telerik:RadSplitter> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

1- hi telerik
in first view my panel is not docket to right edge of my browser
but if i click in dock it will be docket to right

can u help me?
2-does this splitter suporrts rtl mode?

tnx

5 Answers, 1 is accepted

answered on 29 Jul 2009, 02:35 PM

radsplitter.zip

Hi ehsan,

Straight to your questions:

There was a bug in the 2009.1.402 version which causes exactly the behavior you report and the problem occurs only when the SlideDirection is set to Left. The bug is already fixed and I recommend to upgrade to the latest Q2 release - this will solve the problem. I also prepared a workaround for you and attached your modified page in case you prefer not to upgrade.
Yes, the RadSplitter supports RTL but this is still not official and you can test the RTL mode in teh latest internal build. More information about the internal build system is available below:

http://telerikwatch.com/2009/01/latest-internal-radcontrol-builds-now.html

I hope that the provided information and modified page are helpful, in case you need further assistance do not hesitate to contact us again!

Regards,
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.

answered on 24 Sep 2009, 05:59 AM

The workaround attached working well if you use Q1 2009 which is not officially support rtl ( Right to Left ), and you page was all designed for rtl support. very good solution! even if your pages renders right to left but the splitter works well.
But after using Q2 2009 with all previous condition without any changes the splitter and it's rad panel in it doesn't work and it renders completely wrong.I had to do some changes including :
CollapseMode="Forward" for telerik:RadSplitBar and
SlideDirection="Right" for telerik:RadSlidingZone
with these changes some problems solved but others remained, and they are:
1)if you click on text RadSlidingPane it does not render correctly, and does not expand, also radpanel renders incorrectly also.
2)if you press the Dock button RadSlidingPane moves to the left after the Radpanel and still Radpanel renders incorrectly.
3) By selecting the Radpanel Group During test # 2 you can see that some groups disappear.

please set the dir="rtl" in the proper page tags in your solution thus the page whole page renders from right to left then try to raise the rad splitter and rad panel events by clicking on every clickable items and see the result.
It seems that supporting rtl for the new release has not fully tested and it's side affect on radpanelbar.

Could you please make the necessary changes to your workaround based on the latest release Q2 2009 or the latest internal build and update the javascript you have prepared to work when your page has dir="rtl" property in the page tags to support right to left ?

Best Regards

answered on 29 Sep 2009, 08:11 AM

Hi Ali Rad,
The javascript workaround was for the previous version of the RadSplitter the you used. It is not applicable for the latest version of the code and you should remove it. As for the position of the RadSliding pane - the RadSplitter renders as a TABLE element and as you probably know, in rtl mode, the cells of a TABLE element are automatically rendered from right to left. That is why, when you declared first an empty RadPane and then a RadPane with a RadSlidingZone, the empty pane is displayed on the right of the screen and the pane with the sliding zone is displayed on the left. This behavior is expected.

In case you want to achieve the same effect as in the page that Svetlina sent you and that had dir=ltr, you should use the following code:

    
            <head id="Head1" runat="server"> 
        
                <title></title> 
        
                <style type="text/css"> 
        
                    html, body, form 
        
                    { 
        
                        margin: 0; 
        
                        padding: 0; 
        
                        height: 100%; /* needed for container min-height */ 
        
                        overflow: hidden; 
        
                        direction: rtl; 
        
                    } 
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                </asp:ScriptManager> 
        
                <telerik:RadSplitter ID="RadSplitter_Main" runat="server" Orientation="Vertical" 
        
                    Height="100%" Width="100%" Skin="Office2007"> 
        
                    <telerik:RadPane ID="RadPane_menu" runat="server" Scrolling="None" Width="22px"> 
        
                        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" SlideDirection="Right"> 
        
                            <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Menu1" Scrolling="None" 
        
                                EnableDock="true"> 
        
                                <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Office2007" Style="direction: rtl;"> 
        
                                    <Items> 
        
                                        <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1"> 
        
                                            <Items> 
        
                                                <telerik:RadPanelItem Text="123"> 
        
                                                </telerik:RadPanelItem> 
        
                                            </Items> 
        
                                        </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> 
        
                                    </Items> 
        
                                </telerik:RadPanelBar> 
        
                            </telerik:RadSlidingPane> 
        
                            <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Title="Menu2" Scrolling="None"> 
        
                            </telerik:RadSlidingPane> 
        
                        </telerik:RadSlidingZone> 
        
                    </telerik:RadPane> 
        
                    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="None" /> 
        
                    <telerik:RadPane ID="RadPane_left" runat="server" Scrolling="None"> 
        
                        4444444444444444444444444444444444444444444 
        
                    </telerik:RadPane> 
        
                </telerik:RadSplitter> 
        
                </form> 
        
            </body> 
        
            </html>

I was not able to reproduce the problem with the RadPanelBar. Could you please try setting explicit width to the control and check whether this will make a difference? For example:

    
            <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Menu1" Scrolling="None" 
        
                EnableDock="true" Width="205px"> 
        
                <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Office2007"  
        
                Width="200px">

In case this does not help you, post the code of your page here and provide detailed information how we can reproduce the problem - e.g. which browser you use, steps we need to follow, etc.

Best wishes,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 30 Sep 2009, 06:52 AM

hi ali
this works fine in 2009.2.826.35

    
            <body dir="rtl"> 
        
             <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%"> 
        
                    <telerik:RadPane ID="RadPane2" runat="server" Width="200px"></telerik:RadPane> 
        
                    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Backward"></telerik:RadSplitBar> 
        
                    <telerik:RadPane ID="RadPane1" runat="server"> 
        
                    </telerik:RadPane> 
        
                </telerik:RadSplitter> 
        
            </body>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

docking to right

5 Answers, 1 is accepted