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

RadSplitBar (minsize)

2 Answers 62 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Michael Pullella
Top achievements
Rank 1
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

Sort by
0
Accepted
Tsvetie
Telerik team
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.
0
Michael Pullella
Top achievements
Rank 1
answered on 31 Mar 2010, 02:59 PM
Wow... Is there nothing you guys can't do?  Thanks a bunch
Tags
Splitter
Asked by
Michael Pullella
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Michael Pullella
Top achievements
Rank 1
Share this question
or