1 Answer, 1 is accepted
0
Hi Nick,
The SplitBarSize property of the RadSplitter will apply the new width to all RadSplitBars in the splitter. As far as I understand you, you only wish to do this for the collapsed RadSplitBars.
In order to do this, you will have to handle the OnClientExpanded and OnClientCollapsed events of every RadPane in the RadSplitter, set the new width to the appropriate RadSplitBar and deduct that value from one RadPane that is not collapsed. Please have a look at the code fragment below - feel free to extend the code further so it fits your needs:
Sincerely yours,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
The SplitBarSize property of the RadSplitter will apply the new width to all RadSplitBars in the splitter. As far as I understand you, you only wish to do this for the collapsed RadSplitBars.
In order to do this, you will have to handle the OnClientExpanded and OnClientCollapsed events of every RadPane in the RadSplitter, set the new width to the appropriate RadSplitBar and deduct that value from one RadPane that is not collapsed. Please have a look at the code fragment below - feel free to extend the code further so it fits your needs:
| <body> |
| <script type="text/javascript"> |
| function OnClientCollapsed(sender, args) |
| { |
| setTimeout(function(){ |
| var workPaneIndex = sender.get_index(); |
| var workSplitBar = FindRadSplitBar(workPaneIndex, true); |
| SetSplitBarSize(true, workSplitBar); |
| }, 0); |
| } |
| function OnClientExpanded(sender, args) |
| { |
| setTimeout(function(){ |
| var workPaneIndex = sender.get_index(); |
| var workSplitBar = FindRadSplitBar(workPaneIndex, false); |
| SetSplitBarSize(false, workSplitBar); |
| }, 0); |
| } |
| function FindRadSplitBar(workPaneIndex, isCollapsed) |
| { |
| var splitter = $find('<%= RadSplitter1.ClientID %>'); |
| var leftSplitBar; |
| var rightSplitBar; |
| var workSplitBar; |
| var splitbars = splitter.getSplitBars(); |
| for(var i=0; i<splitbars.length; i++) |
| { |
| var splitbar = splitbars[i]; |
| if(splitbar.get_index() == workPaneIndex - 1) |
| { |
| leftSplitBar = splitbar; |
| } |
| else if(splitbar.get_index() == workPaneIndex + 1) |
| { |
| rightSplitBar = splitbar; |
| } |
| } |
| if(isCollapsed) |
| { |
| if(leftSplitBar && !(leftSplitBar.getCollapseBarElement(Telerik.Web.UI.SplitterDirection.Forward).style.display == '' |
| && leftSplitBar.getCollapseBarElement(Telerik.Web.UI.SplitterDirection.Backward).style.display == '')) |
| workSplitBar = leftSplitBar; |
| else if(rightSplitBar && !(rightSplitBar.getCollapseBarElement(Telerik.Web.UI.SplitterDirection.Forward).style.display == '' |
| && rightSplitBar.getCollapseBarElement(Telerik.Web.UI.SplitterDirection.Backward).style.display == '')) |
| workSplitBar = rightSplitBar; |
| } |
| else |
| { |
| if(leftSplitBar && (leftSplitBar.getCollapseBarElement(Telerik.Web.UI.SplitterDirection.Forward).style.display == '' |
| && leftSplitBar.getCollapseBarElement(Telerik.Web.UI.SplitterDirection.Backward).style.display == '') |
| && leftSplitBar.get_element().style.width == "20px") |
| workSplitBar = leftSplitBar; |
| else if(rightSplitBar && (rightSplitBar.getCollapseBarElement(Telerik.Web.UI.SplitterDirection.Forward).style.display == '' |
| && rightSplitBar.getCollapseBarElement(Telerik.Web.UI.SplitterDirection.Backward).style.display == '') |
| && rightSplitBar.get_element().style.width == "20px") |
| workSplitBar = rightSplitBar; |
| } |
| return workSplitBar; |
| } |
| function SetSplitBarSize(increase, splitBar) |
| { |
| if(splitBar) |
| { |
| var splitter = $find('<%= RadSplitter1.ClientID %>'); |
| var splitBarElement = splitBar.get_element(); |
| var splitBarElementWidth = splitBarElement.offsetWidth; |
| var panes = splitter.getPanes(); |
| var paneToRisize; |
| for(var i=0; i<panes.length; i++) |
| { |
| var pane = panes[i]; |
| if(!pane.get_collapsed()) |
| { |
| paneToRisize = pane; |
| break; |
| } |
| } |
| if(increase) |
| { |
| if(paneToRisize && splitBarElementWidth) |
| paneToRisize.set_width(paneToRisize.get_width() + splitBarElementWidth - 20); |
| splitBarElement.style.width = "20px"; |
| } |
| else |
| { |
| if(paneToRisize && splitBarElementWidth) |
| paneToRisize.set_width(paneToRisize.get_width() + splitBarElementWidth - 3); |
| splitBarElement.style.width = "3px"; |
| } |
| } |
| } |
| </script> |
| <form id="form1" runat="server"> |
| <style type="text/css"> |
| .collapseBarExpand, |
| .collapseBarCollapse |
| { |
| margin: auto; |
| } |
| </style> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="800px" SplitBarsSize="4"> |
| <telerik:RadPane ID="RadPane1" runat="server" |
| OnClientCollapsed="OnClientCollapsed" OnClientExpanded="OnClientExpanded"> |
| <div style="background-color:Red;height:100%;"></div> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both" /> |
| <telerik:RadPane ID="RadPane2" runat="server" |
| OnClientCollapsed="OnClientCollapsed" OnClientExpanded="OnClientExpanded"> |
| <div style="background-color:Blue;height:100%;"></div> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" /> |
| <telerik:RadPane ID="RadPane3" runat="server" |
| OnClientCollapsed="OnClientCollapsed" OnClientExpanded="OnClientExpanded"> |
| <div style="background-color:Green;height:100%;"></div> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both" /> |
| <telerik:RadPane ID="RadPane4" runat="server" |
| OnClientCollapsed="OnClientCollapsed" OnClientExpanded="OnClientExpanded"> |
| <div style="background-color:Red;height:100%;"></div> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar4" runat="server" CollapseMode="Both" /> |
| <telerik:RadPane ID="RadPane5" runat="server" |
| OnClientCollapsed="OnClientCollapsed" OnClientExpanded="OnClientExpanded"> |
| <div style="background-color:Blue;height:100%;"></div> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar5" runat="server" CollapseMode="Both" /> |
| <telerik:RadPane ID="RadPane6" runat="server" |
| OnClientCollapsed="OnClientCollapsed" OnClientExpanded="OnClientExpanded"> |
| <div style="background-color:Green;height:100%;"></div> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
Sincerely yours,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center