Splitter collapse and expand hide panelbaritem

7 posts, 0 answers
  1. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 06 Aug 2010 Link to this post

    Hi there,
    In my video capture below, when I collapse and expand the splitter, the panelbaritems will be hidden.
    Did I set something wrong here?

    Video: http://www.xtopia.com.my/ximnettest/telerik/2010-08-06_1656.swf
    URL: http://www.xtopia.com.my/ximnettest/menu_test.aspx

    Code:
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="menu_test.aspx.vb" Inherits="menu_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">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <head runat="server">
        <title></title>
        <style type="text/css">
            html, body, form
            {
                overflow: hidden;
                height: 100%;
                width: 100%;
                margin: 0px;
                padding: 0px;
            }
        </style>
         
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="r" runat="server" />
        <telerik:RadSplitter Skin="Default" runat="Server" ID="mainSplit" Width="100%" Height="100%"
            Orientation="Horizontal" LiveResize="true">
            <telerik:RadPane ID="topPane" runat="server" Height="97">
                <div>
                    Top</div>
            </telerik:RadPane>
            <telerik:RadSplitBar runat="server" ID="SplitBarTop" CollapseMode="Forward" Height="30px"
                EnableResize="False"  />
            <telerik:RadPane runat="server" ID="cPMain" Scrolling="none">
                <telerik:RadSplitter runat="server" ID="RadSplitter2" Skin="Default" BorderSize="0"
                    BorderStyle="None" ResizeMode="Proportional">
                    <telerik:RadPane runat="Server" ID="leftP" Width="230px" MinWidth="500" MaxWidth="350"
                        Scrolling="None" CssClass="relativePane">
                        <div style="height: 100%;">
                            <telerik:RadPanelBar runat="server" ID="mainPanel" Skin="Default" Height="100%" Width="100%"
                                EnableViewState="False" ExpandMode="FullExpandedItem" CollapseDelay="100">
                                <Items>
                              
                                    <telerik:RadPanelItem Text="panel1" Expanded="true" Value="CMS" id="cmsPanel">
                                        <Items>
                                            <telerik:RadPanelItem>
                                                <ItemTemplate>
                                                    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="lp">
                                                         
                                                    </telerik:RadAjaxPanel>
                                                </ItemTemplate>
                                            </telerik:RadPanelItem>
                                        </Items>
                                    </telerik:RadPanelItem>
                               
                                    <telerik:RadPanelItem Text="Panel 2" Value="PropMS" id="PropMSPanel">
                                        <Items>
                                            <telerik:RadPanelItem>
                                                <ItemTemplate>
                                                     
                                                </ItemTemplate>
                                            </telerik:RadPanelItem>
                                        </Items>
                                    </telerik:RadPanelItem>
                                  
                                    <telerik:RadPanelItem Text="Panel 3" Value="SaleMS" id="SaleMSPanel">
                                        <Items>
                                            <telerik:RadPanelItem>
                                                <ItemTemplate>
                                                     
                                                </ItemTemplate>
                                            </telerik:RadPanelItem>
                                        </Items>
                                    </telerik:RadPanelItem>
                                     
                                     
                                    <telerik:RadPanelItem Text="p4" Expanded="false" Value="CustServ" >
                                        <Items>
                                            <telerik:RadPanelItem>
                                                <ItemTemplate>
                                                    <div style="padding: 10px;">
                                                         
                                                    </div>
                                                </ItemTemplate>
                                            </telerik:RadPanelItem>
                                        </Items>
                                    </telerik:RadPanelItem>
                                     
                                     
                                    <telerik:RadPanelItem Text="p5" Value="Media" id="MediaPanel">
                                        <Items>
                                            <telerik:RadPanelItem>
                                                <ItemTemplate>
                                                  
                                                </ItemTemplate>
                                            </telerik:RadPanelItem>
                                        </Items>
                                    </telerik:RadPanelItem>
                                     
                                    <telerik:RadPanelItem Text="p6" Value="membersMS" >
                                        <Items>
                                            <telerik:RadPanelItem>
                                                <ItemTemplate>
                                                     
                                                </ItemTemplate>
                                            </telerik:RadPanelItem>
                                        </Items>
                                    </telerik:RadPanelItem>
                                     
                                    <telerik:RadPanelItem Text="7" Value="Poll">
                                        <Items>
                                            <telerik:RadPanelItem>
                                                <ItemTemplate>
                                                     
                                                </ItemTemplate>
                                            </telerik:RadPanelItem>
                                        </Items>
                                    </telerik:RadPanelItem>
                                    
                                </Items>
                            </telerik:RadPanelBar>
                        </div>
                    </telerik:RadPane>
                    <telerik:RadSplitBar runat="server" ID="RadSplitBar1" CollapseMode="Forward" Width="50" />
                    <telerik:RadPane runat="Server" ID="cP">
                        Content
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
        </form>
    </body>
    </html>
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 11 Aug 2010 Link to this post

    Hi HSLaw,
    I was able to reproduce the problem with the code you provided and forwarded it to our developers. We will fix it for Q2 2010 SP1, scheduled for the end of August. I have updated your Telerik points for bringing the problem to our attention.

    In the meantime, you can use the following workaround:
    <script type="text/javascript">
    function OnClientExpanded(sender, args)
    {
        $telerik.repaintChildren(sender);
    }
    </script>
     
    <telerik:RadSplitter Skin="Default" runat="Server" ID="mainSplit" Width="100%" Height="100%"
        Orientation="Horizontal" LiveResize="true">
        <telerik:RadPane ID="topPane" runat="server" Height="97">
            <div>
                Top</div>
        </telerik:RadPane>
        <telerik:RadSplitBar runat="server" ID="SplitBarTop" CollapseMode="Forward" Height="30px"
            EnableResize="False" />
        <telerik:RadPane runat="server" ID="cPMain" Scrolling="none">
            <telerik:RadSplitter runat="server" ID="RadSplitter2" Skin="Default" BorderSize="0"
                BorderStyle="None" ResizeMode="Proportional">
                <telerik:RadPane runat="Server" ID="leftP" Width="230px" MinWidth="500" MaxWidth="350"
                    Scrolling="None" CssClass="relativePane" OnClientExpanded="OnClientExpanded">
                    <div style="height: 100%;">

    Kind regards,
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 22 Aug 2010 Link to this post

    Hi Support,
    It works.
    Thanks.
  5. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 27 Aug 2010 Link to this post

    Hi,
    I am having same issue on nested splitter, can you kindly share information on how you solved the above mentioned problem.
    Thanks,
    prava
  6. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 27 Aug 2010 Link to this post

    Hi Prava,

    This problem was fixed in the latest version of RadControls for ASP.NET AJAX Q2 2010 SP1. I am unable to provide the code snippet of the exact fix, because it is complex and is not available as a stand alone fix. Nevertheless, it is highly recommended to use the latest version of RadControls. 

    All the best,
    Dobromir
    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
  7. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 30 Aug 2010 Link to this post

    Hi Dobromir ,

    I am using the latest version of RadControls but still get the same issue. One of the RadPane's visiblity is initially  set to false which is modified  as per requirement from code behind to true.  On clicking RadSplitBar, it disappears. Can you kindly suggest how can I get my problem solved.
    Given below is my markup and code.
    <telerik:RadSplitter ID="MapSplitter"  runat="server" Orientation="Horizontal" Skin="Vista"   PanesBorderSize="0"  BorderSize="0"  VisibleDuringInit="false"  >
           <telerik:RadPane ID="DataGridPanel" runat="server"  Scrolling="None"  MinHeight="130"  Height="130" Collapsed="true" >
                         <telerik:RadSplitter ID="Splitter2"  runat="server" Orientation="Horizontal" Skin="Vista"   PanesBorderSize="0"  BorderSize="0"  VisibleDuringInit="false" >
               <telerik:RadPane ID="DataGrid2" runat="server"  Scrolling="None"  MinHeight="130"  Height="130" Collapsed="true" >
                               <uc5:QryForm ID="QueryForm21" runat="server" > </uc5:QryForm>
                </telerik:RadPane>
               <telerik:RadSplitBar ID="RadSplitBar2" runat="server"  CollapseMode="None"  />
            <telerik:RadPane ID="DataGrid3" runat="server"  Scrolling="None"  MinHeight="130"  Height="130" Collapsed="true"   >
                                <uc5:QryForm ID="QueryForm22" runat="server" > </uc5:QryForm>
            </telerik:RadPane>
        </telerik:RadSplitter>
          </telerik:RadPane>
         <telerik:RadSplitBar ID="MapRadSplitBar" runat="server"  CollapseMode="None"  />
         <telerik:RadPane ID="DataGridPanel" runat="server" Scrolling="None"  MinHeight="130"  Height="130" Collapsed="true"  Visible="false" >
                      <uc5:QryForm ID="QueryForm" runat="server" > </uc5:QryForm>
        </telerik:RadPane>
    </telerik:RadSplitter>


    Code to change RadPane's Visibility:
    public static void ShowQueryLayout()
    {
         DataGridPanel.visibility = true;
    }
     
    public static void HideQueryLayout()
    {
         DataGridPanel.visibility = false;
    }

    Thanks,
    Prava


  8. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 02 Sep 2010 Link to this post

    Hi Prava,

    From the provided code I noticed the following errors:
    • All of the RadPanes are initially collapsed (Collapsed="true") - This is incorrect declaration which may cause an unexpected behavior.
    • Two of the RadPanes have the same ID - This is also invalid declaration which will throw an exception during the page load.
    • RadPane does not offer visibility property - please find the full list of RadPane's properties in the following article: RadPane Class Properties

    Could you please fix the above mentioned problems and see if the problem still exists? If so, could you please open a support ticket and provide a fully runnable project and / or a live URL so we can investigate the issue further?

    Sincerely yours,
    Dobromir
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017