I am trying to make the split bar disable resize when an Item is docked
this is all working normally just trying to call the set_enableResize with true doesn't seem to effect the splitBar at all
It will tell me that it is enabled or disable but doesn't seem to let me adjust it from that point forward. If I start with it disabled for resizing it won't enable.
| <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22"> |
| <telerik:RadSlidingPane ID="SlidingPane1" Title="Navigation" runat="server" Width="150" |
| OnClientDocked="Docked" OnClientUndocked="UnDocked"> |
| </telerik:RadSlidingPane> |
| </telerik:RadSlidingZone> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="SplitBar" runat="server" /> |
| function Docked(sender, eventArgs) { |
| var splitBar = $find("<%=SplitBar.ClientID%>"); |
| alert(splitBar.get_enableResize()); |
| splitBar.set_enableResize(true); |
| alert(splitBar.get_enableResize()); |
| } |
| function UnDocked(sender, eventArgs) { |
| var splitBar = $find("<%=SplitBar.ClientID%>"); |
| alert(splitBar.get_enableResize()); |
| splitBar.set_enableResize(false); |
| } |
4 Answers, 1 is accepted
0
Accepted
Hi Mark,
Yes, the client-side setter for the EnableResize property of the RadSplitBar is not implemented yet. You can use the set_locked(true) client-side method of the RadPane however to achieve the same result - just lock the RadPane, holding the RadSlidingZone when necessary.
Best wishes,
Tsvetie
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
Yes, the client-side setter for the EnableResize property of the RadSplitBar is not implemented yet. You can use the set_locked(true) client-side method of the RadPane however to achieve the same result - just lock the RadPane, holding the RadSlidingZone when necessary.
Best wishes,
Tsvetie
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Mink
Top achievements
Rank 1
Rank 1
answered on 05 Jun 2009, 12:19 PM
Is the same true for set_collapseMode?
Because I'm trying to implement a button that toggles the ability to resize and collpase/expand a pane by using the set_collapseMode and set_enableResize and both don't seem to have any effect.
Because I'm trying to implement a button that toggles the ability to resize and collpase/expand a pane by using the set_collapseMode and set_enableResize and both don't seem to have any effect.
0
Hello Mink,
Yes, you are correct and the collapse mode of the RadSplitBar cannot currently been changed on the client. However, in order to get the desired result, I suggest to use an initial splitbar with collapse mode both and then just reference and hide/show the desired element of the both handles. You can obtain a reference to the handles by using the getCollapseBarElement client side method which is listed below:
http://www.telerik.com/help/aspnet-ajax/splitter_clientsideradsplitbar.html
and hide/show it by changing its display to none or to "".
I hope that the suggested approach is helpful, in case you need further assistance, do not hesitate to contact us again.
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.
Yes, you are correct and the collapse mode of the RadSplitBar cannot currently been changed on the client. However, in order to get the desired result, I suggest to use an initial splitbar with collapse mode both and then just reference and hide/show the desired element of the both handles. You can obtain a reference to the handles by using the getCollapseBarElement client side method which is listed below:
http://www.telerik.com/help/aspnet-ajax/splitter_clientsideradsplitbar.html
and hide/show it by changing its display to none or to "".
I hope that the suggested approach is helpful, in case you need further assistance, do not hesitate to contact us again.
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
Mink
Top achievements
Rank 1
Rank 1
answered on 11 Jun 2009, 08:43 AM
That's the solution I had already chosen.
In addition, as an alternative to EnableResize = false, I have set the the minimal width, maximal width and the width to exactly the same number. That way it's impossible to resize by dragging the splitbar. The same can be done for the height obviously, but in my case it concerned a vertical orientation of the radsplitter.
For the benefit of others, here's an example of how I did this.
And here's the code for the page shown in rpLeftPane.
You're missing some css class definitions and the source file for the MinimizeMaximizeButton, but the general idea is that when you click that button the left pane gets minimizes to 24px, so that the button, that now will maximize the left pane, is still visible. This button is now the only possibility to maximize the left pane again, after which you can resize en collapse as before again.
Hope this helps others with similar difficulties as myself.
Besides that, I hope it will soon be possible to just use set_enableResize and set_collapseMode!
Regards,
Mink
In addition, as an alternative to EnableResize = false, I have set the the minimal width, maximal width and the width to exactly the same number. That way it's impossible to resize by dragging the splitbar. The same can be done for the height obviously, but in my case it concerned a vertical orientation of the radsplitter.
For the benefit of others, here's an example of how I did this.
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SplitterPage.aspx.cs" Inherits="CMS.Views.Tests.Collapse_and_Expand_test.SplitterPage" %> |
| <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| <html> |
| <head runat="server"> |
| <title></title> |
| <script type="text/javascript"> |
| var oldSizeLeftPane = 200; |
| var minimizedSize = 24; |
| function MinimizeLeftPane() { |
| var leftPane = GetLeftPane(); |
| oldSizeLeftPane = leftPane.getVarSize(); |
| leftPane.resize(minimizedSize - oldSizeLeftPane); |
| leftPane.set_minWidth(minimizedSize); |
| leftPane.set_maxWidth(minimizedSize); |
| GetSplitBar().getCollapseBarElement().style.display = "none"; |
| } |
| function MaximizeLeftPane() { |
| var leftPane = GetLeftPane(); |
| leftPane.resize(oldSizeLeftPane - minimizedSize); |
| leftPane.set_minWidth(150); |
| leftPane.set_maxWidth(500); |
| GetSplitBar().getCollapseBarElement().style.display = "block"; |
| } |
| </script> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadSplitter Height="100%" Width="100%" ID="rsSplitter" Orientation="Vertical" runat="server" BorderStyle="None"> |
| <telerik:RadPane ID="rpLeftPane" ContentUrl="PageToCollapseAndExpand.aspx" runat="server" Width="200" MinWidth="150" MaxWidth="500" /> |
| <telerik:RadSplitBar ID="rsbSplitBar" runat="server" CollapseMode="Forward" /> |
| <telerik:RadPane ID="rpRightPane" runat="server"> |
| <div style="height:100%; width:100%; text-align:center;"> |
| <div style="height:33%; width:100%"> </div> |
| <div style="vertical-align:middle; height:33%; width:100%"> |
| <span style="font-size:large; font-weight:bold;"> |
| Blablabla<br /> |
| Lalala |
| </span> |
| </div> |
| <div style="height:33%; width:100%"> </div> |
| </div> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| <script type="text/javascript"> |
| //convenience functions |
| function GetLeftPane() { |
| var rad_splitter = $find("<%= rsSplitter.ClientID %>"); |
| return rad_splitter.getPaneById('rpLeftPane'); |
| } |
| function GetSplitBar() { |
| var rad_splitter = $find("<%= rsSplitter.ClientID %>"); |
| return rad_splitter.getSplitBarById('rsbSplitBar'); |
| } |
| </script> |
| </body> |
| </html> |
And here's the code for the page shown in rpLeftPane.
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageToCollapseAndExpand.aspx.cs" Inherits="CMS.Views.Tests.Collapse_and_Expand_test.PageToCollapseAndExpand" %> |
| <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| <html> |
| <head runat="server"> |
| <title></title> |
| <link rel="stylesheet" type="text/css" href="../../../Layout/stylesheet.css" /> |
| <script type="text/javascript"> |
| function MinimizeMe() { |
| var wnd = window.parent; |
| if (wnd != null && typeof (wnd) != "undefined") { |
| if (typeof (wnd.MinimizeLeftPane) != "undefined") { |
| document.getElementById('HidableHeaderBarTitle').style.display = "none"; |
| document.getElementById('HidableContent').style.display = "none"; |
| wnd.MinimizeLeftPane(); |
| var minimizeMaximizeButton = document.getElementById('MinimizeMaximizeButton'); |
| minimizeMaximizeButton.onclick = MaximizeMe; |
| minimizeMaximizeButton.setAttribute('alt', "Vergroot venster"); |
| minimizeMaximizeButton.setAttribute('title', "Vergroot venster"); |
| minimizeMaximizeButton.setAttribute('src', "../../../Layout/Images/ingeklapt.gif"); |
| } |
| } |
| } |
| function MaximizeMe() { |
| var wnd = window.parent; |
| if (wnd != null && typeof (wnd) != "undefined") { |
| if (typeof (wnd.MaximizeLeftPane) != "undefined") { |
| document.getElementById('HidableHeaderBarTitle').style.display = "block"; |
| document.getElementById('HidableContent').style.display = "block"; |
| wnd.MaximizeLeftPane(); |
| var minimizeMaximizeButton = document.getElementById('MinimizeMaximizeButton'); |
| minimizeMaximizeButton.onclick = MinimizeMe; |
| minimizeMaximizeButton.setAttribute('alt', "Verklein venster"); |
| minimizeMaximizeButton.setAttribute('title', "Verklein venster"); |
| minimizeMaximizeButton.setAttribute('src', "../../../Layout/Images/uitgeklapt.gif"); |
| } |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <table cellpadding="0" cellspacing="0"> |
| <tr class="HeaderBarContainer"><td> |
| <div class="HeaderBar"> |
| <div id="HidableHeaderBarTitle" class="HeaderBarTitle">Gebruikers / Groepen</div> |
| <div class="HeaderBarResizeButton"><img id="MinimizeMaximizeButton" src="../../../Layout/Images/uitgeklapt.gif" onclick="MinimizeMe();" alt="Verklein venster" title="Verklein venster" /></div> |
| </div> |
| </td></tr> |
| <tr><td> |
| <div id="HidableContent" class="ScrollingContent"> |
| <asp:ScriptManager ID="ScriptManager2" runat="server" /> |
| <telerik:RadTreeView ID="rtvObjectTree" Runat="server" Skin="Vista"> |
| <Nodes> |
| <telerik:RadTreeNode Text="Groepen" Value="RootNodeGroepen" Expanded="true" runat="server"> |
| <Nodes> |
| <telerik:RadTreeNode Text="abcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| </Nodes> |
| </telerik:RadTreeNode> |
| <telerik:RadTreeNode Text="Gebruikers" Value="RootNodeGebruikers" Expanded="true" runat="server"> |
| <Nodes> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| <telerik:RadTreeNode Text="abc" Value="1" /> |
| </Nodes> |
| </telerik:RadTreeNode> |
| </Nodes> |
| <collapseanimation duration="100" type="OutQuint" /> |
| <expandanimation duration="100" /> |
| </telerik:RadTreeView> |
| </div> |
| </td></tr> |
| </table> |
| </form> |
| </body> |
| </html> |
Hope this helps others with similar difficulties as myself.
Besides that, I hope it will soon be possible to just use set_enableResize and set_collapseMode!
Regards,
Mink