Splitter client side API bug - get_collapsed()

9 posts, 0 answers
  1. Alan
    Alan avatar
    1 posts
    Member since:
    Jul 2008

    Posted 07 Jul 2008 Link to this post

    Please run the following code:

    Test.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="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 runat="server">  
        <title>Untitled Page</title> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <p> 
            <input type="button" onclick="showSplitterClientState();" value="Show current splitter client state" /> 
            <input type="button" onclick="showSplitBarClientState();" value="Show current splitbar client state" /></p>  
        <p> 
            <b>Server side state: </b><asp:Literal ID="litServerSideInfo" runat="server" /></p>  
        <div> 
            <asp:ScriptManager ID="smScriptManager" runat="server" /> 
            <telerik:RadAjaxManager ID="AjaxManager" runat="server" EnablePageHeadUpdate="False" EnableHistory="true">  
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="btnLeftMenu1">  
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="rspSplitter" /> 
                            <telerik:AjaxUpdatedControl ControlID="litServerSideInfo" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                    <telerik:AjaxSetting AjaxControlID="btnLeftMenu2">  
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="rspSplitter" /> 
                            <telerik:AjaxUpdatedControl ControlID="litServerSideInfo" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
            </telerik:RadAjaxManager> 
            <telerik:RadSplitter ID="rspSplitter" runat="server">  
                <telerik:RadPane ID="rpLeftMenuPane" runat="server" BackColor="AliceBlue">  
                    <asp:Button ID="btnLeftMenu1" Text="Left menu1" OnClientClick="hideSubMenuPane();" OnClick="btnLeftMenu1_Click" runat="server" /><br /> 
                    <asp:Button ID="btnLeftMenu2" Text="Left menu2" OnClientClick="showSubMenuPane();"  OnClick="btnLeftMenu2_Click" runat="server" /> 
                </telerik:RadPane> 
                <telerik:RadPane ID="rpLeftSubMenuPane" OnClientCollapsed="leftSubMenuPaneCollapsed" OnClientBeforeExpand="leftSubMenuPaneExpand" runat="server" BackColor="Gold">  
                    <asp:Button ID="btnLeftSubMenu" Text="Left sub menu" OnClick="btnLeftSubMenu_Click" runat="server" /> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="rsbSplitBar" runat="server" CollapseExpandPaneText="Expand/Collapse" /> 
                <telerik:RadPane ID="rpContentPane" runat="server" BackColor="BurlyWood">  
                    <asp:Label ID="lblContent" Text="Content" runat="server" /> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </div> 
        </form> 
        <script type="text/javascript">  
            function showSplitterClientState()  
            {  
                var splitter = $find('<%= rspSplitter.ClientID%>');  
                if (splitter != null)  
                {  
                    var leftMenuPane = splitter.getPaneById('<%= rpLeftMenuPane.ClientID%>');  
                    var leftSubMenuPane = splitter.getPaneById('<%= rpLeftSubMenuPane.ClientID%>');  
                    var contentPane = splitter.getPaneById('<%= rpContentPane.ClientID%>');  
                  
                    var rsbSplitBar = $find('<%= rsbSplitBar.ClientID%>');  
                    if (rsbSplitBar != null)  
                    {  
                        //alert("Collapse Mode: " + rsbSplitBar.get_collapseMode());  
                    }  
                    alert("LeftMenuPane collapsed: " + leftMenuPane.get_collapsed()  
                     + "\nLeftSubMenuPane collapsed: " + leftSubMenuPane.get_collapsed()  
                     + "\nContentPane collapsed: " + contentPane.get_collapsed());  
                }  
            }  
              
            function showSplitBarClientState()  
            {  
                var splitBar = $find('<%= rsbSplitBar.ClientID%>');  
                if (splitBar != null)  
                {  
                    var prevPane = splitBar.get_prevPane();  
                    var nextPane = splitBar.get_nextPane();  
                      
                    alert("Collapse Mode: " + splitBar.get_collapseMode()  
                     + "\nprevPane is collapsed? " + splitBar.isCollapsed(1)  
                     + "\nnextPane is collapsed? " + splitBar.isCollapsed(2));  
                }  
            }  
              
            function hideSubMenuPane()  
            {  
                var splitter = $find('<%= rspSplitter.ClientID%>');  
                if (splitter != null)  
                {  
                    var leftMenuPane = splitter.getPaneById('<%= rpLeftMenuPane.ClientID%>');  
                    var leftSubMenuPane = splitter.getPaneById('<%= rpLeftSubMenuPane.ClientID%>');  
                    var contentPane = splitter.getPaneById('<%= rpContentPane.ClientID%>');  
                      
                    leftSubMenuPane.collapse();  
                    contentPane.expand();  
                      
                    showSplitterClientState();  
                }  
            }  
              
            function showSubMenuPane()  
            {  
                var splitter = $find('<%= rspSplitter.ClientID%>');  
                if (splitter != null)  
                {  
                    var leftMenuPane = splitter.getPaneById('<%= rpLeftMenuPane.ClientID%>');  
                    var leftSubMenuPane = splitter.getPaneById('<%= rpLeftSubMenuPane.ClientID%>');  
                    var contentPane = splitter.getPaneById('<%= rpContentPane.ClientID%>');  
                      
                    leftSubMenuPane.expand();  
                    contentPane.expand();  
                      
                    showSplitterClientState();  
                }  
            }  
              
            function leftSubMenuPaneCollapsed(pane)  
            {  
                alert(pane.get_id() + ": collapsed");  
            }  
              
            function leftSubMenuPaneExpand(pane)  
            {  
                alert(pane.get_id() + ": expanded");  
            }  
        </script> 
    </body> 
    </html> 
     

    Test.aspx.cs

     
    using System;  
    using System.Web.UI.WebControls;  
     
    public partial class Test : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            btnLeftMenu1.Text = "Left menu 1";  
            btnLeftMenu2.Text = "Left menu 2";  
            btnLeftSubMenu.Text = "Left sub menu";  
            lblContent.Text = "Content";  
     
            InitializeSplitter();  
        }  
     
        protected void btnLeftMenu1_Click(object sender, EventArgs e)  
        {  
            lblContent.Text += " - updated by left menu 1";  
            btnLeftSubMenu.Text += " - 1";  
     
            rpLeftSubMenuPane.Collapsed = true;  
            rpContentPane.Collapsed = false;  
     
            ShowServerSideInfo();  
        }  
     
        protected void btnLeftMenu2_Click(object sender, EventArgs e)  
        {  
            lblContent.Text += " - updated by left menu 2";  
            btnLeftSubMenu.Text += " - 2";  
     
            rpLeftSubMenuPane.Collapsed = false;  
            rpContentPane.Collapsed = false;  
     
            ShowServerSideInfo();  
        }  
     
        protected void btnLeftSubMenu_Click(object sender, EventArgs e)  
        {  
            lblContent.Text += " - updated by left sub menu";  
        }  
     
        private void InitializeSplitter()  
        {  
            rspSplitter.Width = new Unit(100, UnitType.Percentage);  
            rspSplitter.Height = new Unit(100, UnitType.Percentage);  
            rspSplitter.ResizeMode = Telerik.Web.UI.SplitterResizeMode.Proportional;  
     
            rpLeftMenuPane.Width = new Unit(120, UnitType.Pixel);  
            rpLeftMenuPane.Height = new Unit(100, UnitType.Percentage);  
            rpLeftMenuPane.MinWidth = 120;  
            rpLeftMenuPane.Scrolling = Telerik.Web.UI.SplitterPaneScrolling.None;  
            rpLeftMenuPane.Collapsed = false;  
     
            rpLeftSubMenuPane.Width = new Unit(200, UnitType.Pixel);  
            rpLeftSubMenuPane.Height = new Unit(100, UnitType.Percentage);  
            rpLeftSubMenuPane.MinWidth = 200;  
            rpLeftSubMenuPane.Scrolling = Telerik.Web.UI.SplitterPaneScrolling.Both;  
            rpLeftSubMenuPane.Collapsed = false;  
     
            rsbSplitBar.EnableViewState = true;  
            rsbSplitBar.CollapseMode = Telerik.Web.UI.SplitBarCollapseMode.Both;  
     
            rpContentPane.Width = new Unit(300, UnitType.Pixel);  
            rpContentPane.Height = new Unit(100, UnitType.Pixel);  
            rpContentPane.MinWidth = 200;  
            rpContentPane.Scrolling = Telerik.Web.UI.SplitterPaneScrolling.Y;  
            rpContentPane.Collapsed = false;  
        }  
     
        private void ShowServerSideInfo()  
        {  
            litServerSideInfo.Text = "" 
                + "LeftMenuPane collapsed = " + rpLeftMenuPane.Collapsed + "<br />"  
                + "LeftSubMenuPane collapsed = " + rpLeftSubMenuPane.Collapsed + "<br />"  
                + "ContentPane collapsed = " + rpContentPane.Collapsed;  
        }  
    }  
     

    Please do the following steps when you open this test page:

    1. Click the "Show current splitter client state" button. You will get an alert message that tells you the expected value.
    2. Click the "Show current splitbar client state" button. You will get an alert message that tells you the expected value.
    3. Click "Left menu 1". The middle pane is collapsed. "Server side state" will tell you the server-side value.
    4. Do step1 and step2 again to check the client side value. You will get all expected values as well. So far so good...
    5. Click "Left menu 3". The middle pane is expanded. "Server side state" will tell you the server-side value.
    6. Click the "Show current splitter client state" button to check the client side values.  You will get WRONG value from for the middle pane collpase value (it's true, which it should be false).
    7. Click the "Show current splitbar client state" button. You will get the expected value (false) of the middle pane's collapse status.
    8. You will also see the values from "Server side state" are right.
    9. Now you will be failed to collapse the middle pane.

    Therefore, I doubt if the client side function "pane.get_collapsed()" doesn't work well. Becasue of the wrong status of the middle pane, you cannot collpase it.

    Any comments will be helpful.
    Cheers
    Alan

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 08 Jul 2008 Link to this post

    Hello Alan,
    I tried to reproduce the problem you describe, but to no avail - please find my test page attached. I tested with the latest version of the suite, namely version 2008.1.619.20.

    Could you please prepare and send us a simple running project, demonstrating the problem you describe? Once we are able to reproduce the problem locally, we will do our best to help you get the desired result.

    Sincerely yours,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. alan
    alan avatar
    3 posts
    Member since:
    Jul 2008

    Posted 10 Jul 2008 Link to this post

    sorry for replying you late, i just cannot remember my registered email, i think i might type the wrong email address incautiously. I just re-registered a new account.

    I've downloaded the latest version and that fixed the bug (the one i got the issue was 2008.1.4xxxx), thanks.

    However, i do noticed the splitter rends out a new <div> to wrap the splitter control when i call it from ajax manager, e.g. 
    <telerik:AjaxSetting AjaxControlID="leftMenu">  
      <UpdatedControls> 
        <telerik:AjaxUpdatedControl ControlID="rspSplitter" /> 
      </UpdatedControls> 
    </telerik:AjaxSetting> 

    and then rends out

    "<div id="ctl00_ctl00_rspSplitterPanel">"
    that actually breaks our entire layout.  I believe one of my colleagues will rasie a new post for the details.

    Cheers
    Alan

  4. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 10 Jul 2008 Link to this post

    Hello alan,

    If you would like to render the controls ajaxified by the manager inline instead of as block evements wrapped in a div, consider setting the RadAjaxManager's UpdatePanelsRenderMode property to Inline (its default value is block) or use the approach presented in this code library thread (attaching the AjaxSettingCreating event):

    http://www.telerik.com/community/code-library/submission/b311D-ttcbe.aspx

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. alan
    alan avatar
    3 posts
    Member since:
    Jul 2008

    Posted 10 Jul 2008 Link to this post

    Thanks for your reply. I'm afraid this is not the answer to this issue. Let's have a look the difference between my code and DOM inspector.

    In my code:
    AjaxManager
    <telerik:RadAjaxManager ID="MasterAjaxManager" runat="server">  
      <AjaxSettings> 
        <telerik:AjaxSetting AjaxControlID="leftMenu">  
          <UpdatedControls> 
            <telerik:AjaxUpdatedControl ControlID="splitter" /> 
          </UpdatedControls> 
        </telerik:AjaxSetting> 
      </AjaxSettings> 
    </telerik:RadAjaxManager> 
    Splitter
    <telerik:RadSplitter ID="splitter" CssClass="class1" runat="server">  
      <telerik:RadPane ID="leftMenuPane" runat="server" BackColor="AliceBlue">  
        <asp:Button ID="leftMenu" Text="Left menu" runat="server" /><br /> 
      </telerik:RadPane> 
      <telerik:RadSplitBar ID="splitBar" runat="server" /> 
      <telerik:RadPane ID="contentPane" runat="server" /> 
    </telerik:RadSplitter> 

    In DOM inspector (i didnt use server-side control prefix for keeping the id short in the example)
    Scenario 1: NOT updating the splitter from ajaxmanager that renders out:
    <html> 
      <head /> 
      <body> 
        <form id="form1" runat="server">  
          <div id='splitter' class='class1'>  
            ...  
          </div> 
        </form> 
      </body> 
    </html> 

    Scenario 2:  updating the splitter from ajaxmanager that renders out:
    <html> 
      <head /> 
      <body> 
        <form id="form1" runat="server">  

          

        <div id='splitterPanel'>  

            <div id='splitter' class='class1'>  
              ...  
            </div> 

          

        </div> 

        </form> 
      </body> 
    </html> 

    Please notice the extra <div> rendered from splitter. That's the reason causing the problem.

    For example, you define the height to 100% in html, head, body, form and the class1, that works perfect in scenario1 and that works ok in IE in scenario2, i think that becasue even you dont define height in the parent div, IE will still inherit the value, 100%,  from parent's parent (which is form in this example), but firefox and other browsers dont do that way.

    Cheers
    Alan
  6. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 14 Jul 2008 Link to this post

    Hi Alan,

    You can find out the ClientID of the AJAX panel's <div> element and apply a height:100% style to it like this:

    RadAjaxManager

    <telerik:RadAjaxManager ID="MasterAjaxManager" runat="server" 
      OnAjaxSettingCreated="MasterAjaxManager_AjaxSettingCreated">   
      <AjaxSettings>  
        <telerik:AjaxSetting AjaxControlID="leftMenu"
          <UpdatedControls>  
            <telerik:AjaxUpdatedControl ControlID="splitter" />  
          </UpdatedControls>  
        </telerik:AjaxSetting>  
      </AjaxSettings>  
    </telerik:RadAjaxManager> 


    C#

    protected string UpdatePanelClientID; 
     
    protected void MasterAjaxManager_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e) 
        if (e.Initiator.ID == "leftMenu"
        { 
            this.UpdatePanelClientID = e.UpdatePanel.ClientID; 
        } 


    CSS in the page <head>

    <head runat="server">   
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
    <style type="text/css"
        #<%= UpdatePanelClientID %>{height:100%;} 
    </style> 
    </telerik:RadCodeBlock> 
    </head>  
     


    Let us know if you need further advice.


    Sincerely yours,
    Dimo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  7. Michael Dunbar
    Michael Dunbar avatar
    129 posts
    Member since:
    Sep 2007

    Posted 14 Jul 2008 Link to this post

    Unfortunately, if you apply a height 100% value to this div via the hack provided then it negates the height offset property of the splitter.
  8. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 18 Jul 2008 Link to this post

    Hello Michael,

    Indeed, you are right. Please allow some time to investigate this and offer a solution. We will write again in this forum thread. Thank you.

    Sincerely yours,
    Dimo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  9. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 23 Jul 2008 Link to this post

    Hi Michael,

    Please find attached a sample web page, which demonstrates how to implement a workaround for the RadSplitter HeightOffset issue when applying height to the update panel.

    Let us know if you need more information.


    Kind regards,
    Tsvetie
    the Telerik team

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