Repro steps:
1. go to http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_clientsideapi/defaultcs.aspx
2. click on pane 1 and click the pin to dock it.
3. click the "Toggle 'Pane 1' width 200 / 100 px" link
expected behavior:
pane is resized
actual behavior:
no resize occurs
Thanks,
Chris
1. go to http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_clientsideapi/defaultcs.aspx
2. click on pane 1 and click the pin to dock it.
3. click the "Toggle 'Pane 1' width 200 / 100 px" link
expected behavior:
pane is resized
actual behavior:
no resize occurs
Thanks,
Chris
7 Answers, 1 is accepted
0
Hi Chris,
In order to resize a docked RadSlidingPane you should resize its parent RadPane by using the client-side method resize of the pane which is listed below:
http://www.telerik.com/help/aspnet-ajax/splitter_clientsideradpane.html
I prepared for you the following code for demonstration purposes:
If you first dock teh RadSlidingPane and after that click teh button, its width will resize accordingly. I hope that my suggestion and the provided code are helpful, let us know how it goes.
Best wishes,
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.
In order to resize a docked RadSlidingPane you should resize its parent RadPane by using the client-side method resize of the pane which is listed below:
http://www.telerik.com/help/aspnet-ajax/splitter_clientsideradpane.html
I prepared for you the following code for demonstration purposes:
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="scriptManager" runat="server" /> |
| <script type="text/javascript"> |
| function ResizePane() |
| { |
| $find("<%=LeftPane.ClientID %>").resize(500, 1); |
| } |
| </script> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="400" Width="800" VisibleDuringInit="false"> |
| <telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="None"> |
| <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22" ClickToOpen="true"> |
| <telerik:RadSlidingPane ID="Pane1" runat="server" Title="Pane1" Width="150" EnableResize="true"> |
| RadSlidingPane |
| </telerik:RadSlidingPane> |
| </telerik:RadSlidingZone> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" /> |
| <telerik:RadPane ID="EndPane" runat="server"> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| <button onclick="ResizePane();return false;"> |
| Resize docked</button> |
| </form> |
| </body> |
If you first dock teh RadSlidingPane and after that click teh button, its width will resize accordingly. I hope that my suggestion and the provided code are helpful, let us know how it goes.
Best wishes,
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
chris
Top achievements
Rank 1
Rank 1
answered on 20 Jul 2009, 05:27 PM
Thanks for your response. That works well.
I would note that from an API intuitiveness point of view it is not a good implementation. That is, the fact that the RadPane is the pane that must be resized when the SlidingPane is docked is not obvious in any of the documentation nor is it intuitive. To the un-initiated it's all just a SlidingPane so you should be able to call resize (or set_width or whatever) directly on the sliding pane regardless of wether it's docked or not.
Thanks for your help,
Chris
I would note that from an API intuitiveness point of view it is not a good implementation. That is, the fact that the RadPane is the pane that must be resized when the SlidingPane is docked is not obvious in any of the documentation nor is it intuitive. To the un-initiated it's all just a SlidingPane so you should be able to call resize (or set_width or whatever) directly on the sliding pane regardless of wether it's docked or not.
Thanks for your help,
Chris
0
Hello Chris,
In order to change the size of a RadSlidingPane which is docked you should change the size of its parent RadPane - otherwise even the sliding pane is resized, the bigger width will not be visible. That is why we believe that it makes sense to resize a docked RadSlidingPane by resizing its parent RadPane. However, we agree with you that this might not be very intuitive for our customers and that is why I updated our help according to your suggestion.
Thank you for your cooperation, we appreciate it!
Sincerely yours,
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.
In order to change the size of a RadSlidingPane which is docked you should change the size of its parent RadPane - otherwise even the sliding pane is resized, the bigger width will not be visible. That is why we believe that it makes sense to resize a docked RadSlidingPane by resizing its parent RadPane. However, we agree with you that this might not be very intuitive for our customers and that is why I updated our help according to your suggestion.
Thank you for your cooperation, we appreciate it!
Sincerely yours,
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
chris
Top achievements
Rank 1
Rank 1
answered on 29 Jul 2009, 01:38 AM
To add on to my original question, how to do you make a RadSlidingPane resize it's parent RadPane? That is, when a user resizes a sliding pane we want it to resize all of it's sibling sliding panes to be the same size. One of them may be docked so you'd need to resize the parent RadPane. I've attached some code fired by the OnClientResized event of the RadSlidingPane but the problem is that if you try to resize your parent RadPane it fires OnClientResized events for all it's child RadSlidingPanes so you end up in a loop.
Thanks,
Chris
| function ResizeSiblingPanes(sender, eventArgs) { | |
| var parentSlidingZone = sender._zone; | |
| var siblings = parentSlidingZone.getPanes(); | |
| var newSize = sender.get_width(); | |
| var parentRadPane = sender.get_parentPane(); | |
| var currentPane; | |
| var isDocked; | |
| //resize the sibling SlidingPanes | |
| for (var i in siblings) { | |
| currentPane = siblings[i]; | |
| if (currentPane != sender) { | |
| currentPane.set_width(newSize); | |
| } | |
| } | |
| //resize the parent RadPane (takes the delta rather than the complete size) | |
| parentRadPane.resize(parentRadPane.get_width() - newSize); | |
| } | |
Thanks,
Chris
0
Accepted
Hello chris,
I examined the provided code and I think that you should make your code more complex - e.g determine the direction in which you should resize the RadPane, etc. I prepared for you the following sample code:
and for your conveninece I also attached a sample test page. Please, use this code as a start point for your implementation.
Kind 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.
I examined the provided code and I think that you should make your code more complex - e.g determine the direction in which you should resize the RadPane, etc. I prepared for you the following sample code:
| <body> |
| <form id="frmMain" runat="server"> |
| <telerik:RadScriptManager ID="rsmMain" runat="server" /> |
| <script type="text/javascript"> |
| var newSize = 0; |
| function ResizeSiblingPanes(sender, eventArgs) |
| { |
| var parentSlidingZone = $find("<%=zone.ClientID%>"); |
| var siblings = parentSlidingZone.getPanes(); |
| if(!sender.get_docked()) |
| { |
| newSize = sender.get_width(); |
| } |
| var parentRadPane = sender.get_parentPane(); |
| //resize the sibling SlidingPanes |
| for (var i in siblings) |
| { |
| currentPane = siblings[i]; |
| if (currentPane != sender) { |
| if(currentPane.get_docked()) |
| { |
| if(newSize > parentRadPane.get_width()) |
| { |
| parentRadPane.resize(newSize - parentRadPane.get_width(), 1); |
| } |
| else |
| { |
| parentRadPane.resize(newSize - parentRadPane.get_width(), 2); |
| } |
| } |
| else |
| { |
| currentPane.set_width(newSize); |
| } |
| } |
| } |
| } |
| </script> |
| <telerik:RadSplitter ID="rsMain" runat="server" Width="100%" Height="100%" VisibleDuringInit="false"> |
| <telerik:RadPane ID="rp1" runat="server" Width="22"> |
| <telerik:RadSlidingZone ID="zone" runat="server"> |
| <telerik:RadSlidingPane ID="slide1" runat="server" Title="First" OnClientResized="ResizeSiblingPanes"> |
| </telerik:RadSlidingPane> |
| <telerik:RadSlidingPane ID="slide2" runat="server" Title="Second" OnClientResized="ResizeSiblingPanes"> |
| </telerik:RadSlidingPane> |
| <telerik:RadSlidingPane ID="slide3" runat="server" Title="Third" OnClientResized="ResizeSiblingPanes"> |
| </telerik:RadSlidingPane> |
| </telerik:RadSlidingZone> |
| </telerik:RadPane> |
| <telerik:RadPane ID="rp2" runat="server"> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
and for your conveninece I also attached a sample test page. Please, use this code as a start point for your implementation.
Kind 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.
0
chris
Top achievements
Rank 1
Rank 1
answered on 04 Aug 2009, 11:20 PM
Thanks for your help. This worked great.
It might be good to clarify the documentation of these resize methods.
It's really unclear what "backward" and "forward" mean in this context. It seems more like it means "reduce" or "increase" by the number of pixels specified. It would be more intuitive to have it just infer backward/forward by passing in a positive or negative value or to have the resize method do the "if (newSize > parentRadPane.get_width())..." logic itself.
To further add to the confusion there is the setVarSize method. What do you mean by the resizable direction? How does this method differ from resize?
Thanks,
Chris
It might be good to clarify the documentation of these resize methods.
It's really unclear what "backward" and "forward" mean in this context. It seems more like it means "reduce" or "increase" by the number of pixels specified. It would be more intuitive to have it just infer backward/forward by passing in a positive or negative value or to have the resize method do the "if (newSize > parentRadPane.get_width())..." logic itself.
To further add to the confusion there is the setVarSize method. What do you mean by the resizable direction? How does this method differ from resize?
Thanks,
Chris
0
Hello chris,
Straight to your questions:
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.
Straight to your questions:
- You are correct that indeed in this case forward and backward are actually equal to increase/decrease but this is expected - forward is to the right direction and backward - to the left which will result for this pane as increase/decrease of the size. In case there is something unclear, please tell us what exactly is it and we will do our best to explain it.
- When you have a vertical splitter, you do not need to set the height of a pane - it is always equal to the height of the splitter. This means that it has only one resizable direction which means that you can only change the width and not the height. Similarly, for a horizontally oriented splitter, the setVarSize method will set the height.
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.