SplitBar set_enableResize not working?

5 posts, 1 answers
  1. Mark
    Mark avatar
    2 posts
    Member since:
    Mar 2009

    Posted 23 Mar 2009 Link to this post

    I am trying to make the split bar disable resize when an Item is docked
                                <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"   /> 
    this is all working normally  just trying to call the set_enableResize with true doesn't seem to effect the splitBar at all
            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); 
            } 
    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.
  2. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 26 Mar 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mink
    Mink avatar
    57 posts
    Member since:
    Apr 2009

    Posted 05 Jun 2009 Link to this post

    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.


  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 11 Jun 2009 Link to this post

    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.
  6. Mink
    Mink avatar
    57 posts
    Member since:
    Apr 2009

    Posted 11 Jun 2009 Link to this post

    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.
    <%@ 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%">&nbsp;</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%">&nbsp;</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> 
     
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017