RadSplitBar (minsize)

3 posts, 1 answers
  1. Michael Pullella
    Michael Pullella avatar
    26 posts
    Member since:
    Nov 2009

    Posted 25 Mar 2010 Link to this post

    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:RadSplitBar ID="NavigationContentSplitBar" runat="server" CollapseMode="Forward" /> 

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

             <asp:ContentPlaceHolder ID="mainContent" runat="server"></asp:ContentPlaceHolder>                 



  2. Answer
    Tsvetie avatar
    1517 posts

    Posted 31 Mar 2010 Link to this post

    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)
            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;
    <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
        <telerik:RadPane ID="NavigationPane" runat="server" Width="200px" MaxWidth="200"
            Navigation Goes Here!
        <telerik:RadSplitBar ID="NavigationContentSplitBar" runat="server" CollapseMode="Forward" />
        <telerik:RadPane ID="RadPane1" runat="server">

    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.
  3. DevCraft R3 2016 release webinar banner
  4. Michael Pullella
    Michael Pullella avatar
    26 posts
    Member since:
    Nov 2009

    Posted 31 Mar 2010 Link to this post

    Wow... Is there nothing you guys can't do?  Thanks a bunch
Back to Top