RadSplitter Collapsing Issue

[Diwakar]

I have a problem with the RadSplitter which i am using in my Page. When i click on the RadSplitBar for collapsing it the RadPane dissappears altogether.

Code --

<table cellpadding="0px" cellspacing="0px" border="0px" width="100%">
    <tr>
       <td id="matterPartyPreviewContainer" runat="server">
            <telerik:RadSplitter ID="matterPartySplitter" runat="server" Width="100%" Height="95%"
                SkinsPath="~/RadControls/Splitter/Skins" Skin="Outlook" Orientation="Horizontal">
                <telerik:RadPane ID="matterPartyTreeSplitterPane1" runat="server" Width="100%" Height="49%"
                    Collapsed="False" Scrolling="Y">
                    <telerik:RadTreeView runat="server" ID="matterPartyTreeView" SkinsPath="~/RadControls/TreeView/Skins"
                        Skin="Office2007" Height="98%" Width="100%" OnNodeExpand="matterPartyTreeView_NodeExpand"
                        OnNodeClick="matterPartyTreeView_NodeClick" OnNodeCreated="matterPartyTree_NodeCreated"
                        EnableDragAndDrop="true" OnNodeDrop="matterpartyTreeView_HandleDrop">
                    </telerik:RadTreeView>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="matterPartySplitBar" runat="server" CollapseMode="Backward" Enabled="true" />
                <telerik:RadPane ID="matterPartyPreviewSplitterPanel" runat="server" Width="100%"
                    Visible="true" Height="49%" Collapsed="false" Scrolling="None">
                    <asp:Panel ID="previewContentPanel" runat="server">
                        <ucPreview:MatterPartyPreview ID="matterPartyPreviewID" runat="server"></ucPreview:MatterPartyPreview>
                    </asp:Panel>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </td>
       
        <telerik:RadAjaxManager ID="matterPartyAjaxManager" EnableAJAX="true" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="matterPartyTreeView">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="matterPartyTreeView" LoadingPanelID="matterPartyTreeViewLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="matterPartyPreviewID">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="matterPartyPreviewID" LoadingPanelID="matterPartyPreviewLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
       
        <telerik:RadAjaxLoadingPanel ID="matterPartyPreviewLoadingPanel" runat="server" Transparency="30"
            BackColor="#E0E0E0">
            <ucPanel:LoadingPanel ID="PreviewLoadingPanel" runat="server" />
        </telerik:RadAjaxLoadingPanel>
       
        <telerik:RadAjaxLoadingPanel ID="matterPartyTreeViewLoadingPanel" runat="server"
            Transparency="30" BackColor="#E0E0E0">
            <ucPanel:LoadingPanel ID="TreeViewLoadingPanel" runat="server" />
        </telerik:RadAjaxLoadingPanel>
    </tr>
</table>

Any suggestions would be welcome & appreciated.

[Svetlina Anati]

Hello Diwakar,

Thank you for the provided code.

I created a new web site and pasted it there in order to test it. After I commented some code lines in order to run it I noticed the following:

1. Your RadSplitter does not take 100% of the page as you have set it. This is because the RadSplitter takes 100% of its parent element and you have nested it in a table. In order to get the proper rendering you should set all its parent elements' height and also to add the following style in your page's head:
   
   

    <style type="text/css">
       html, body, form
       {
          height: 100%;
          margin: 0px;
          padding: 0px;
       }
       </style>

   
   I also do not recommend to nest the RadSplitter in a table - it is intended to replace the table and you can build your layout entirely based only on nested RadSplitters and RadPanes.
2. The RadSplitter behaved as expected - to collapse a RadPane means to "hide" it and to expand it means to show it again. You can observe the correct and expected behavior here.
3. In case you did not mean this and you have problems based on the commented content, please open a new support ticket and send me a fully working project with all needed files included along with a detailed explanation of the desired behavior.

Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center