How to make splitter displays one pane only?

[Phuc]

Hi all,

I want to use Splitter as a CollapsiblePanel. It means there are 2 areas on my page and I just want one area is visible at one time.
For ex : 
1. As default the first pane is visible, the second pane invisible.
2. When user clicks on the Splitbar, the second pane is visible & the first pane will be invisible.
If user clicks again on the Splitbar the step  "1" will be applied. When Splitbar is clicked, it will be slided from left to right / right to left depending on which pane is visible.

Thanks for your help.

[Dobromir]

Hi Phuc,

To achieve the required result you can handle the ClientExpanded client-side event of the both panes and manually collapse the other pane, e.g.:

<telerik:RadSplitter ID="RadSplitter1" runat="server">
    <telerik:RadPane ID="RadPane1" runat="server" Collapsed="True" OnClientExpanded="RadPane1_OnClientExpanded">
    </telerik:RadPane>
    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both">
    </telerik:RadSplitBar>
    <telerik:RadPane ID="RadPane2" runat="server" OnClientExpanded="RadPane2_OnClientExpanded">
    </telerik:RadPane>
</telerik:RadSplitter>

<script type="text/javascript">
    function RadPane1_OnClientExpanded(pane, args)
    {
        var splitter = pane.get_splitter();
        var pane2 = splitter.getPaneById("<%= RadPane2.ClientID %>");
        pane2.collapse();
    }
    function RadPane2_OnClientExpanded(pane, args)
    {
        var splitter = pane.get_splitter();
        var pane1 = splitter.getPaneById("<%= RadPane1.ClientID %>");
        pane1.collapse();
    }
</script>

Regards,
Dobromir
the Telerik team

[Phuc]

Hi Dobromir,

Thank you. It works well.
One more question about this control.
How can I modify its CSS for displaying no border of all - RadPane, RadSplitBar and make its height is Auto ?

Regards,
Phuc PHAM

[Dobromir]

Hi Phuc,

You can configure RadSplitter to render without any borders by setting its BorderSize property to 0, e.g.:

<telerik:RadSplitter ID="RadSplitter1" runat="server" BorderSize="0">

Regarding the auto height, if you want to size the splitter to be sized according its content you can find an example of how to achieve this in the following KB article:
Initially Resize the RadSplitter according to its content

Regards,
Dobromir
the Telerik team

[Phuc]

Hi Dobromir,

It's OK with auto height and border but I got a problem with using Splitter in a Splitter.
In MasterPage, I have a Splitter which divides the page into 2 parts. One is for Menu Navigation, the other is for Content Page.
The second Pane (which for Content Page) has a div tag with its width (710px) is defined in CSS file.
In Content Page, I also have a Splitter which contains 2 Panes.

The strange here is the Width of this Splitter is greater than the Width of Div tag (in Master Page) so some areas in the Content Page are lost or horizontal scroll bar of MasterPage.Splitter appears depending on setting Scrolling = true/false.

I don't know why this happened.
Please tell me how I can fix this.

Thank you so much.

[Dobromir]

Hi Phuc,

By default, if a splitter is nested inside another splitter, the nested splitter inherits the width and the height of the parent pane and its width and height properties are not taken into account. To disable this behavior you need to set the ResizeWithParentPane property of the nested splitter to false. Please review the following help article for more information:
Nested Splitters


Best wishes,
Dobromir
the Telerik team

[Phuc]

Thanks Dobromir. It works fine.

I still have another problem of Splitter /Nested Splitter. It's about image of SplitBar.
As you known, In Master Page I have a main splitter. And in a Content Page, I have another Splitter. The issue here is Image of SplitBar in Master Page differs from Image of SplitBar in Content Page.
I use the following CSS to set its images for SplitBar. Please tell me how can I do this. 

.RadSplitter_Default .rspCollapseBarExpand
{
    background-position: 0px 0px !important;
    background: transparent;
    background-image: url(/Styles/images/leftsplitter.png) !important;
    height:40!important;
    width:17px!important;
}

.RadSplitter_Default .rspCollapseBarCollapse,
.RadSplitter_Default .rspCollapseBarHorizontalCollapse
{
    background: transparent;
    background-position: 0px 0px !important;
    background-image: url(/Styles/images/leftsplitter.png) !important;
    height:40px!important;
    width:17px!important;
}

[Niko]

Hi Phuc,

Please, make sure that both splitters use the same Skin or if you wish that the skins defer, then you should add the corresponding CSS selector in the provided CSS rules:

.RadSplitter_Default .rspCollapseBarExpand,
.RadSplitter_Default .rspCollapseBarHorizontalExpand,
.RadSplitter_Forest .rspCollapseBarExpand,
.RadSplitter_Forest .rspCollapseBarHorizontalExpand
{
    background-position: 0px 0px !important;
    background: transparent;
    background-image: url(/content/arrows/right.png) !important;
    height:40px!important;
    width:17px!important;
}

.RadSplitter_Default .rspCollapseBarCollapse,
.RadSplitter_Default .rspCollapseBarHorizontalCollapse,
.RadSplitter_Forest .rspCollapseBarCollapse,
.RadSplitter_Forest .rspCollapseBarHorizontalCollapse
{
    background: transparent;
    background-position: 0px 0px !important;
    background-image: url(/content/arrows/right.png) !important;
    height: 40px !important;
    width: 17px !important;
}

Also I noticed a small typo in the code you provided - the first height rule does not specifies the metrics, i.e. px.

Hope this helps.

All the best,
Niko
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Phuc]

Hi Niko,

It's OK now. Thanks so much.

Regards,
Phuc