Nested RadSplitter hiding RadSplitBar on Collapse

[Prava kafle]

Hi,

I have a nested RadSplittter. The fist Splitter "Main splitter" is divided into two parts horizontally for title bar and  content pane.
   The content pane has RadSplitter2   
    RadSplitter2 is divided vertically for navigation pane on left and  some other stuffs on right.
          The right pane of RadSplitter2  has
           RadSplitter3  which  is divided horizontally  into panes to display map on top and datagrid at bottom.

I am having issue with my RadSplitBar  "MapRadSplitBar" on  RadSplitter3. It hides when I click the collapse button.
The strange thing is it reappears when I re size the button.

I believe  I need to fix something  in RadSplitter3 but I do not know what. I have an update panel outside RadSplitter3, to show updates in DataGrid pane on button click event .
Given below is my markup:

   <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"  Orientation="Horizontal" Skin="Vista"  LiveResize="true"  VisibleDuringInit="false" ResizeWithBrowserWindow="true"   >
            <telerik:RadPane ID="TitleBarPane" runat="server"  Locked="true"  Height="94px"  CssClass="TitleBarPane"  >
                <div id="TitleBar" >
                    <img id="logoImage" src="theme/default/Logo.JPG"  alt="Company Logo" />
                    <img id="logoStretch"  src="theme/default/LogoStretch.JPG"   alt="Fill Image" />
               </div>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="TitleRadSplitBar" runat="server"  Height="100%" Width="100%"  />
            <telerik:RadPane ID="ContentPane" runat="server" Scrolling="None"  >
                <telerik:RadSplitter ID="ContentRadSplitter" runat="server" Skin="Vista" >
                    <telerik:RadPane ID="LeftRadPane" runat="server"  Width="230"  BackColor="White"  Scrolling="None">
                       <asp:UpdatePanel ID="updTest" runat="server" UpdateMode="Conditional" ><ContentTemplate>
                       <ucNav:NavBox ID="navLeft" runat="server" />
                        <ucMsg:uscMsgBox ID="uscMgBox3" runat="server" />
                        <asp:Label ID="label3"  Text="XYZ"  runat="server" style="position:absolute; color:Red; left:20px;  bottom:50px; z-index:100;" />
                       </ContentTemplate></asp:UpdatePanel>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="NavRadSplitBar" runat="server" CollapseMode="Forward"  />
                    <telerik:RadPane ID="MapRadPane" runat="server"  Scrolling="None" >
                       <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="always" ><ContentTemplate>
                         <telerik:RadSplitter ID="MapDivSplitter" runat="server" Orientation="Horizontal" Skin="Vista"  LiveResize="true"  VisibleDuringInit="false"  >
                            <telerik:RadPane ID="MapPane" runat="server" Scrolling="None" >
                                        <ucMap:Map ID="Map" runat="server"  />
                            </telerik:RadPane>
                            <telerik:RadSplitBar ID="MapRadSplitBar" runat="server"  CollapseMode="Both""      />
                            <telerik:RadPane ID="DataGridPane" runat="server"  Height="130" Scrolling="Both" Collapsed="true" >
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                       </ContentTemplate></asp:UpdatePanel>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
         </telerik:RadSplitter>           


Any suggestion  is appreciated.
Thanks
Prava               
   

[Svetlina Anati]

Hi Prava,

I built up a test demo page based on your code but unfortunately to no avail - I could not reproduce the issue on my side. What I can suggest is the following:

1) Make sure that you have the following style in your page's head:

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

2) Make sure that you are using the latest version of RadControls because there were similar issues with older versions of RadSplitter.

I attached my test page for your reference - let me know if you by any chance reproduce the issue with it with the latest version and if so provide more information about the browser, the exact reproduction steps, etc and I will do my best to help.


Greetings,
Svetlina
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.

[Prava kafle]

Hi,
 I  modified  code to replicate my case.  The Rad splitter works great by expanding and collapsing the panels until I hit the 2nd button "Hide second Image".  Once  I hit this button and go back to the first button, the rad splitter works differently. On collapse, in this test case I can see only a portion of Radsplitbar. 

I assume the nested panel is occupying more space than the parent RadPanel. On setting the "Scrolling ='Both' " property I can see scrollbars.Given below is my testcode. I am using  Telerik Version 10.1.4.15 and FireFox browser.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="NextGenWebApp.Test" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"><title></title><style type="text/css">
        html, body, form
        {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
         .TitleRadSplitBar
        {
           margin :0px;
           overflow:hidden;
        }

    </style><script runat="server" >


         protected void Button1_Click(object sender, EventArgs e)
        {
            DataGridPane.Collapsed = false;
            MapRadSplitBar.CollapseMode = SplitBarCollapseMode.Both;
        }
           protected void Button2_Click(object sender, EventArgs e)
        {
            DataGridPane.Collapsed = true;
            MapRadSplitBar.CollapseMode = SplitBarCollapseMode.None;
        }
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
             Orientation="Horizontal" Skin="Vista" LiveResize="true" VisibleDuringInit="false" ResizeWithBrowserWindow="true">
        <telerik:RadPane ID="TitleBarPane" runat="server" Locked="true" Height="94px">
                 <asp:Image ID="logoImage" ImageUrl="theme/default/Logo.JPG"  alt="Company Logo" runat="server" />
                <asp:Image id="logoStretch" ImageUrl="theme/default/LogoStretch.JPG" alt="Fill Image"   runat="server" Height="95px" Width="100%" />
        </telerik:RadPane>
        <telerik:RadSplitBar ID="TitleRadSplitBar" runat="server" Height="100%" Width="100%" />
        <telerik:RadPane ID="ContentPane" runat="server" Scrolling="None">
            <telerik:RadSplitter ID="ContentRadSplitter" runat="server" Skin="Vista">
                <telerik:RadPane ID="LeftRadPane" runat="server" Width="230" BackColor="White" Scrolling="None">
                    <asp:UpdatePanel ID="updTest" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                         <asp:Button ID="Button1" runat="server" Text="Display Second Image "   onclick="Button1_Click"/>
                            <asp:Button ID="Button2" runat="server" Text="Hide Second Image "   onclick="Button2_Click"/>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="NavRadSplitBar" runat="server" CollapseMode="Forward"  />
                <telerik:RadPane ID="MapRadPane" runat="server" Scrolling="None">
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="always">
                        <ContentTemplate>
                            <telerik:RadSplitter ID="MapDivSplitter" runat="server" Orientation="Horizontal" Skin="Vista" LiveResize="true" VisibleDuringInit="false">
                                <telerik:RadPane ID="MapPane" runat="server" Scrolling="None">
                                    <asp:Panel id="firstDiv"  height="100%" width="100%" style="background-color:Olive;" runat="server"></asp:Panel>
                                </telerik:RadPane>
                                <telerik:RadSplitBar ID="MapRadSplitBar" runat="server" CollapseMode="None" />
                                <telerik:RadPane ID="DataGridPane" runat="server" MinHeight="100" Height="130" Scrolling="Both" Collapsed="true">
                                        <asp:Panel id="SecondDiv"  height="100%" width="100%" style=" background-color:Maroon;" runat="server"></asp:Panel>
                                </telerik:RadPane>
                            </telerik:RadSplitter>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>
    </form>
</body>
</html>

Thanks,
Prava

[Svetlina Anati]

Hello Prava kafle,

Thank you for the provided code, we were able to reproduce the issue which turned out to be related to the calculations when the pane is initially collapsed. I forwarded the problem and the bug will be fixed these days in one of the upcoming internal builds (unfortunately the fix will not take place in the upcoming SP because there is not enough time to fix and test the code). This being said, once the bug is fixed you can upgrade and this will fix the issue.

Thank you once again for your kind cooperation, we highly appreciate it and I also updated your account with some Telerik points for your report! 

Regards,
Svetlina
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.

[Prava kafle]

Hi,
Thank you very much for your time and effort in helping me. The issue was with the RadSplitter, it was not considering the PanesBorderSize and  Bordersize  while recalculating  RadPane, once I set  both property to 0, everything worked fine.

For all splitters in nested splitter set  PanesBorderSize="0"  BorderSize="0".

 <telerik:RadSplitter ID="MapDivSplitter" runat="server" Orientation="Horizontal" Skin="Vista"  LiveResize="true" PanesBorderSize="0"  BorderSize="0" ResizeWithParentPane="true"     >

Thanks
Prava
                               

[Svetlina Anati]

Hello Prava kafle,

Indeed, this will also do the trick if it is OK with you not to have border as a temporary fix. The issue actually comes from exactly 1px difference coming from the border because the 1px border is not taken into account when the pane is collapsed.

Best wishes,
Svetlina
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.