This is a migrated thread and some comments may be shown as answers.

Radsplitter Collapse Min Width

5 Answers 119 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Dale Palmer
Top achievements
Rank 1
Dale Palmer asked on 15 Dec 2009, 02:23 PM
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

5 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 17 Dec 2009, 01:27 PM
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.
0
Dale Palmer
Top achievements
Rank 1
answered on 17 Dec 2009, 02:09 PM
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
0
Svetlina Anati
Telerik team
answered on 19 Dec 2009, 11:32 AM
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.
0
Richard Taylor
Top achievements
Rank 1
answered on 30 Dec 2009, 03:20 PM

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

 

 

 

 

 

 

0
Svetlina Anati
Telerik team
answered on 04 Jan 2010, 11:34 AM
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.
Tags
Splitter
Asked by
Dale Palmer
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Dale Palmer
Top achievements
Rank 1
Richard Taylor
Top achievements
Rank 1
Share this question
or