How to make splitter displays one pane only?

9 posts, 4 answers
  1. Phuc
    Phuc avatar
    47 posts
    Member since:
    Aug 2011

    Posted 27 Aug 2011 Link to this post

    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.
  2. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 31 Aug 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Phuc
    Phuc avatar
    47 posts
    Member since:
    Aug 2011

    Posted 06 Sep 2011 Link to this post

    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
  5. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 07 Sep 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  6. Phuc
    Phuc avatar
    47 posts
    Member since:
    Aug 2011

    Posted 08 Sep 2011 Link to this post

    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.
  7. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 08 Sep 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  8. Phuc
    Phuc avatar
    47 posts
    Member since:
    Aug 2011

    Posted 09 Sep 2011 Link to this post

    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
    }


  9. Answer
    Niko
    Admin
    Niko avatar
    387 posts

    Posted 12 Sep 2011 Link to this post

    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.
  10. Phuc
    Phuc avatar
    47 posts
    Member since:
    Aug 2011

    Posted 13 Sep 2011 Link to this post

    Hi Niko,

    It's OK now. Thanks so much.

    Regards,
    Phuc
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017