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
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.
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
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">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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.
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
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.