Hello Telerik Team,
I have a left sliding pane for navigation, and a right pane to show content from other pages. The left pane contains a RadPanelBar that has NavigateUrl links that target the link into the right pane. Very simple and works well.
One problem: when you dock the left sliding pane, the resize event does not fire in the right pane (in the loaded content page) which causes content in the right pane to slide off to the right and be hidden. If you resize the browser, everything is resized properly. If you undock the left sliding pane, the resize fires in th right pane, and everything resizes properly as well.
I've tried a number of things, but I thought you might have some idea.
Thank you in advance.
Alan
I have a left sliding pane for navigation, and a right pane to show content from other pages. The left pane contains a RadPanelBar that has NavigateUrl links that target the link into the right pane. Very simple and works well.
One problem: when you dock the left sliding pane, the resize event does not fire in the right pane (in the loaded content page) which causes content in the right pane to slide off to the right and be hidden. If you resize the browser, everything is resized properly. If you undock the left sliding pane, the resize fires in th right pane, and everything resizes properly as well.
I've tried a number of things, but I thought you might have some idea.
Thank you in advance.
Alan
2 Answers, 1 is accepted
0
Hi Alan,
I prepared a simple page to test your scenario, but everything worked as expected - I am using the latest version of the Prometheus suite, namely Version 2007.3.1205.0. Below follows the code of my page:
Could you please prepare and send us a simple running project, demonstrating the described problem?
Sincerely yours,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
I prepared a simple page to test your scenario, but everything worked as expected - I am using the latest version of the Prometheus suite, namely Version 2007.3.1205.0. Below follows the code of my page:
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="700px" Height="700px"> |
| <telerik:RadPane ID="RadPane1" runat="server" Width="22px" Scrolling="None"> |
| <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server"> |
| <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="First"></telerik:RadSlidingPane> |
| <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Title="Last"></telerik:RadSlidingPane> |
| </telerik:RadSlidingZone> |
| </telerik:RadPane> |
| <telerik:RadPane ID="RadPane2" runat="server" ContentUrl="http://www.google.com"></telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
Could you please prepare and send us a simple running project, demonstrating the described problem?
Sincerely yours,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
AJ
Top achievements
Rank 1
Rank 1
answered on 17 Dec 2007, 04:45 PM
Hi Tsvetie,
Thanks for responding. I solved the problem. If you change your demo to pull in your own custom page, not Google, and code your page with splitters and scrolling grids to fit, then you'll see that the panes in those splitters will not resize. This makes sense because it is, after all, an external page.
But here's how I solved it: on the main page I put in a js function similar to your examples:
The function resizeContent() is on my external page, and simple "touches" the splitter which contains all elements on the page. The splitter width is set to 100%.
Thanks for responding. I solved the problem. If you change your demo to pull in your own custom page, not Google, and code your page with splitters and scrolling grids to fit, then you'll see that the panes in those splitters will not resize. This makes sense because it is, after all, an external page.
But here's how I solved it: on the main page I put in a js function similar to your examples:
function OnDocked(sender, args)
{
var splitter = $find("<%= RadSplitter2.ClientID %>");
var pane = splitter.getPaneById('<%= RadPane4.ClientID %>');
var iframe = pane.getExtContentElement();
var contentWindow = iframe.contentWindow;
if (contentWindow != null)
{
contentWindow.resizeContent();
}
}
The function resizeContent() is on my external page, and simple "touches" the splitter which contains all elements on the page. The splitter width is set to 100%.
function
resizeContent()
{
var splitter = $find("<%= RadSplitter1.ClientID %>");
splitter.set_Width(232); // don't care, will snap to 100% and resize the panes
}
This works quite well. Thanks for your response, hopefully this will help someone else.
Alan