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

RadSplitBar (minsize)

2 Answers 65 Views

Splitter

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

Michael Pullella asked on 25 Mar 2010, 01:41 PM

Is there a way to override the default behavior of the CollapseMode of a RadSplitBar?

Instead of collapsing to the outside boundary of the splitter where it lives, I want to set it to a particular size (and display a graphic as the content).

In my example, I have a splitter with a splitbar whose collapsemode is forward. When I click on button to collapse the bar, I want it to collapse to say 20px and even better to display a custom graphic (maybe a bar that says something like "Navigation Pane" rotated counterclockwise.)

    
             <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" HeightOffset="60"> 
        
                 <telerik:RadPane ID="NavigationPane" runat="server" Width="200px" MaxWidth="200"> 
        
                     Navigation Goes Here! 
        
                 </telerik:RadPane> 
        
                 <telerik:RadSplitBar ID="NavigationContentSplitBar" runat="server" CollapseMode="Forward" /> 
        
                 <telerik:RadPane ID="RadPane1" runat="server"> 
        
                     <asp:ContentPlaceHolder ID="mainContent" runat="server"></asp:ContentPlaceHolder>                 
        
                 </telerik:RadPane> 
        
            </telerik:RadSplitter>

2 Answers, 1 is accepted

Accepted

answered on 31 Mar 2010, 08:10 AM

Hello Michael Pullella,
The RadSplitBar control does not offer the functionality you describe. You can, however, implement it with JavaScript. For example:

<script type="text/javascript">

var navigationPaneCollapsed = false;

function OnClientCollapsing(sender,args)

{

args.set_cancel(true);

sender.set_width(navigationPaneCollapsed ? "200px" : "20px");

var splitbar = $find("<%= NavigationContentSplitBar.ClientID %>");

var button = splitbar.getCollapseBarElement(Telerik.Web.UI.SplitterDirection.Forward);

if (button)

button.className = navigationPaneCollapsed ? "rspCollapseBarCollapse" : "rspCollapseBarExpand";

navigationPaneCollapsed = !navigationPaneCollapsed;

}

</script>

<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"

HeightOffset="60">

<telerik:RadPane ID="NavigationPane" runat="server" Width="200px" MaxWidth="200"

OnClientCollapsing="OnClientCollapsing">

Navigation Goes Here!

</telerik:RadPane>

<telerik:RadSplitBar ID="NavigationContentSplitBar" runat="server" CollapseMode="Forward" />

<telerik:RadPane ID="RadPane1" runat="server">

</telerik:RadPane>

</telerik:RadSplitter>

Greetings,
Tsvetie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.