Radsplitter Collapse Min Width

6 posts, 0 answers
  1. Dale Palmer
    Dale Palmer avatar
    27 posts
    Member since:
    May 2008

    Posted 15 Dec 2009 Link to this post

    Hi,

    I know that the default (and only as far as I can find) width that the collapse on a RadSplitter drops to is 0px.
    Has anyone managed to find a way to collapse to a minimum width of say 25px, so as not to obscure the pane completely?

    Any pointers will be very welcome.

    Yours thankfully

    Dale
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 17 Dec 2009 Link to this post

    Hello Dale,

     Currently the RadSplitter does not offer this functionality out of the box. However, if you provide your exact splitter definition (no need to paste your content in the splitter, just share the markup definition) we can try to provide a solution for this specific case only. Note, that what you want to achieve can be done only in very particular scenarios and we cannot ensure that we can provide a solution without examining the setup.

    This being said, once you share the code here, we will examine it and we will do our best to provide a solution.


    Greetings,
    Svetlina
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dale Palmer
    Dale Palmer avatar
    27 posts
    Member since:
    May 2008

    Posted 17 Dec 2009 Link to this post

    Hi,

    thanks for your help.

    At the moment the scenerio is fairly straightforward.  There are two panes in a splitter and a panel bar in the left one. I just want the left collapse to only go to 25px rather than 0px.
    <telerik:RadSplitter ID="RadSplitter1" Runat="server" 
            Skin="Web20" LiveResize="True" Height="100%" Width="100%">  
            <telerik:RadPane ID="RadPane1" Runat="server" MaxWidth="180" MinWidth="30"   
                Width="180px">  
                <telerik:RadPanelBar ID="RadPanelBar1" Runat="server" Height="400px"   
                    Skin="Outlook" Width="180px">  
                    <Items> 
                        <telerik:RadPanelItem runat="server" Text="Summary">  
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem runat="server" Text="To Do">  
                            <Items> 
                                <telerik:RadPanelItem runat="server" Text="Documents Awaiting Acceptance">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem runat="server" Text="Notes Awaiting Response">  
                                </telerik:RadPanelItem> 
                            </Items> 
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem runat="server" Text="Draft">  
                            <Items> 
                                <telerik:RadPanelItem runat="server" Text="Purchase Orders">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem runat="server" Text="Sales Orders">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem runat="server" Text="Order Acceptances">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem runat="server" Text="Delivery Notes">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem runat="server" Text="Goods Received">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem runat="server" Text="Sales Invoices">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem runat="server" Text="Remittance Advice">  
                                </telerik:RadPanelItem> 
                            </Items> 
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem runat="server" Text="Documents In Progress">  
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem runat="server" Text="Completed Documents">  
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem runat="server" Text="Trading Partners">  
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem runat="server" Text="Upload Manager">  
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem runat="server" Text="Knowledgebase">  
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem runat="server" Text="Support">  
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelBar> 
            </telerik:RadPane> 
              
            <telerik:RadSplitBar ID="RadSplitBar1" Runat="server" CollapseMode="Both" /> 
            <telerik:RadPane ID="RadPane2" Runat="server">  
            </telerik:RadPane> 
        </telerik:RadSplitter> 

    Thanks

    Dale
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 19 Dec 2009 Link to this post

    Hi Dale,

    I spend some time in developing a solution for your case and I was finally able to implement it. Please, examine the following code snippet I prepared for you:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
        html, body, form
        {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="mng" runat="server">
            </asp:ScriptManager>
      
            <script type="text/javascript">
            var min = 25;
            function CollapseToMinWidth(sender, args)
            {
                   args.set_cancel(true);
                   var splitBar = sender._getTargetSplitBar(1)
                   if (splitBar != null) 
                   {
                     sender.resize(min - sender.get_width(), 1);
                     var collapseBarElement = splitBar.getCollapseBarElement(1)
                     if (collapseBarElement != null) 
                     {
                         collapseBarElement.className = splitBar._getExpandDivClass(1);
                         splitBar._collapsed[1] = true;
                         sender._initialExpandMode = false;
                         sender._initialCollapseMode = true;
                         sender._collapsed = true;
                         sender._expandedSize = sender.get_width();
                     }
                   }
            }
      
            function ExpandFromMinWidth(sender, args)
            {
               args.set_cancel(true);
               var splitBar = sender._getTargetSplitBar(2)
                if (splitBar != null) 
                   {
                     sender.resize(parseInt(sender._originalWidth) - min, 2);
                     var collapseBarElement = splitBar.getCollapseBarElement(1)
                     if (collapseBarElement != null) 
                     {
                         collapseBarElement.className = splitBar._getCollapseDivClass(1);
                         splitBar._collapsed[1] = false;
                     }
                      sender._collapsed = false;
                      sender._initialCollapseMode = false;
                   }
            }
            </script>
      
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Skin="Web20" LiveResize="True"
                Height="100%" Width="100%">
                <telerik:RadPane ID="RadPane1" runat="server" MaxWidth="180" MinWidth="30" Width="180px"
                    OnClientCollapsing="CollapseToMinWidth" OnClientBeforeExpand="ExpandFromMinWidth">
                    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Height="400px" Skin="Outlook"
                        Width="180px">
                        <Items>
                            <telerik:RadPanelItem runat="server" Text="Summary">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="To Do">
                                <Items>
                                    <telerik:RadPanelItem runat="server" Text="Documents Awaiting Acceptance">
                                    </telerik:RadPanelItem>
                                    <telerik:RadPanelItem runat="server" Text="Notes Awaiting Response">
                                    </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Draft">
                                <Items>
                                    <telerik:RadPanelItem runat="server" Text="Purchase Orders">
                                    </telerik:RadPanelItem>
                                    <telerik:RadPanelItem runat="server" Text="Sales Orders">
                                    </telerik:RadPanelItem>
                                    <telerik:RadPanelItem runat="server" Text="Order Acceptances">
                                    </telerik:RadPanelItem>
                                    <telerik:RadPanelItem runat="server" Text="Delivery Notes">
                                    </telerik:RadPanelItem>
                                    <telerik:RadPanelItem runat="server" Text="Goods Received">
                                    </telerik:RadPanelItem>
                                    <telerik:RadPanelItem runat="server" Text="Sales Invoices">
                                    </telerik:RadPanelItem>
                                    <telerik:RadPanelItem runat="server" Text="Remittance Advice">
                                    </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Documents In Progress">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Completed Documents">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Trading Partners">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Upload Manager">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Knowledgebase">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Support">
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelBar>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" />
                <telerik:RadPane ID="RadPane2" runat="server">
                </telerik:RadPane>
            </telerik:RadSplitter>
        </form>
    </body>
    </html>

    Note, however, that I changed the CollapseMode to be Forward instead of Both because of the following facts:

    1) You have MaxWidth for the first pane which is equal to its Width - this means that you cannot collapse the other pane because this will resiult in bigger width than the maxwidth and having a collapse button when collapsing is forbidden will be confusing.

    2) I dynamically change the CSS of the collapse button and thus if you keep setting Both, you should hide one of teh arrows at some point because you will have two arrows with the same direction.

    Note, however, that as already explained your requirement is complex to be implemented and thus the provided code works for this configuration only and it will not work for other configurations, e.g if you add another splitbar or remove this one, etc.

    I hope that my efforts and the code I prepared for you will meet your requirements, let me knwo how it goes.


    Sincerely yours,
    Svetlina
    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.
  6. Richard Taylor
    Richard Taylor avatar
    1 posts
    Member since:
    Sep 2009

    Posted 30 Dec 2009 Link to this post

    I have a similar request for the same functionality and was able to implement your solution successfully except for one item.

    I have a splitter that is setup vertically with a left and right pane.  In the left pane, I have another splitter setup horizontally using your technique.  The top pane (in the left pane) has dynamic content that adjusts to the positioning of the splitter that's setup vertically. 

    When the javascript executes this line:

     

        sender._collapsed = 

    true;

    The browser thinks the top pane (in the left pane) is collapsed and therefore doesn't react to the positioning of the splitter that's setup vertically.  If I comment out this line, the horizontal splitbar doesn't think the top pane(in the left pane) is collapsed and doesn't respond to the click but it does respond to the positioning of the spitter that's setup vertically.

    Any suggestions on how to make that dynamic content react to the positioning of the splitter setup vertically and still get the splitbar to think the top pane (in the left pane) is collapsed?

    Richard

     

     

     

     

     

     

  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Jan 2010 Link to this post

    Hi Richard,

    In your case I suggest to completely remove the attached handlers and attach your own mousedown handler which resizes the pane. A sample demo which can be used as a start point is attached. Feel free to modify it further in order to meet your needs.


    Sincerely yours,
    Svetlina
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017