Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Splitter client side API bug - get_collapsed()

8 Answers 181 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Alan
Top achievements
Rank 1
Alan asked on 07 Jul 2008, 02:55 PM
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

8 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 08 Jul 2008, 12:48 PM
RadSplitter_GetCollapsed.zip
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
0
alan
Top achievements
Rank 1
answered on 10 Jul 2008, 11:04 AM
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

0
Sebastian
Telerik team
answered on 10 Jul 2008, 02:20 PM
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
0
alan
Top achievements
Rank 1
answered on 10 Jul 2008, 03:33 PM
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
0
Dimo
Telerik team
answered on 14 Jul 2008, 09:30 AM
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
0
Michael Dunbar
Top achievements
Rank 2
answered on 14 Jul 2008, 09:33 AM
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.
0
Dimo
Telerik team
answered on 18 Jul 2008, 03:30 PM
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
0
Tsvetie
Telerik team
answered on 23 Jul 2008, 04:49 PM
AjaxifiedSplitter.zip
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.
Tags
Splitter
Asked by
Alan
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
alan
Top achievements
Rank 1
Sebastian
Telerik team
Dimo
Telerik team
Michael Dunbar
Top achievements
Rank 2
Share this question
or