This is a migrated thread and some comments may be shown as answers.

Shrinking RadSplitter

4 Answers 63 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Shane
Top achievements
Rank 1
Shane asked on 21 Oct 2011, 07:04 PM
I may be doing something wrong here but we use the Splitter for our screen layout.  In any case we have a layout with a menu at the top and a footer at the bottom.  In the middle is a content area and then above that a message area which would need to adjust based on how many user messages there are, but if there are none, not show up.  In any case when you submit multiple times on the same page, the complete splitter continually shrinks for each submission.  Here is a sample ASPX I put together to demonstrate the point.  Simply run it and click the Test button and watch the splitter shrink.

<%@ Page AutoEventWireup="true" Inherits="PlaygroundControl" Language="c#" Codebehind="PlaygroundPage.aspx.cs" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<head id="Head1" runat="server">
    <title>Playground Page</title>
    <style type="text/css">
        .ie7ScrollFix {   position:relative; }
        html, body, form
        {   font-size: 10px;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            margin:0px;
            padding:0px;
            width: 100%;
            height: 100%;
            border-style: none;
            background-color: #FFFFFF;
            color: #000000;
            overflow:hidden;
            z-index:0;
            border-collapse: collapse;
        }
    </style>
</head>
<body class="BODY">
<form id="test" runat="server">
<telerik:RadScriptManager ID="supportScripts" runat="server" >
</telerik:RadScriptManager>
 
<%  // Code block could be moved to load event but here right now
    RadPane msgPane = RadSplitterMaster.GetPaneById("messagePane");
    int rowCount = 2;
    msgPane.SetExpandedSize(Unit.Pixel(rowCount > 0?rowCount*15:0));
    msgPane.Height = Unit.Pixel(rowCount > 0 ? rowCount * 15 : 0);
    msgPane.Collapsed = (rowCount > 0 ? false : true);   
%>
 
<telerik:RadSplitter ID="RadSplitterMaster" runat="server" Height="100%" Width="100%"
    VisibleDuringInit="false" ClientIDMode="Predictable" ResizeMode="AdjacentPane"
    ResizeWithBrowserWindow="true" ResizeWithParentPane="true" Orientation="Horizontal"
    BorderStyle="Solid" BorderSize="3">
        <telerik:RadPane ID="headerPane" runat="server" Height="52px" Scrolling="None" Locked="true" BackColor="Blue">
            Menu Stuff <br />
            Here
        </telerik:RadPane>
        <telerik:RadPane ID="messagePane" runat="server" Scrolling="None" BackColor="Orange" >
                Random stuff here<br />
                With lines and such<br />
        </telerik:RadPane>
        <telerik:RadPane ID="contentPane" runat="server" Scrolling="Both" BackColor="White" >
            <input type="submit" value="Click to Test" />
            <div>Put in full content regardless of size</div>
        </telerik:RadPane>
        <telerik:RadPane ID="footerPane" runat="server" Height="12px" Locked="true" BackColor="Green">
            <div id="footerDiv">
                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/LicenseAgreement.htm">
                    <b><font size="-2" color="white" >©My Company Stuff</font></b>
                </asp:HyperLink>   
            </div>
        </telerik:RadPane>
</telerik:RadSplitter>
 
</form>
</body>
</html>
I put all the code in the ASPX for clarity sake.  Is this a bug or am I just doing something wrong here?
Thanks,
Shane

4 Answers, 1 is accepted

Sort by
0
Shane
Top achievements
Rank 1
answered on 21 Oct 2011, 09:34 PM
It's like when I went to school and asked the teacher a question and answered it myself.  Basically if I remove the line:
msgPane.SetExpandedSize(Unit.Pixel(rowCount > 0?rowCount*15:0));
everything appears to work properly.  So now that It works, I suppose we could say this has been resolved however I am curious why this may cause an issue. 

For example if you go the other way and comment out the Height line, the screen behaves as before.  So that leads me to question why someone should ever you the SetExpandedSize method over just setting the Height or Width?

In any case, thanks,
Shane
0
Shane
Top achievements
Rank 1
answered on 21 Oct 2011, 09:37 PM
And now I know why I had that in there.  If the browser is in compatibility mode, then is totally messes with the layout without the SetExpandedSize method call.  So I'm back to square one, however it does give me something I can work with.  Any suggestions would be helpful.
0
Shane
Top achievements
Rank 1
answered on 25 Oct 2011, 04:38 PM
Well it isn't the best choice but corrects the behavior to work properly.  I left the code as I had posted it originally setting both the height and the width and simply added this javascript block to the end of the code and it seems to behave as intended.

<script type="text/javascript">
    setTimeout(
        function () {
            var splitter = $find("<%= RadSplitterMaster.ClientID %>");
            splitter.resize(splitter.get_width() - 1, splitter.get_height() - 1);
        }, 100);
</script>
0
Dobromir
Telerik team
answered on 27 Oct 2011, 09:08 AM
Hi Shane,

The problem that you experience occurs because the SetExpandedSize() method of the pane should be used only in cases where the pane is programmatically expanded / collapsed. When this value is set to something different than 0 the splitter treats the pane as collapsed when calculating its size, and that is why the splitter shrinks on each postback.

Greetings,
Dobromir
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Tags
Splitter
Asked by
Shane
Top achievements
Rank 1
Answers by
Shane
Top achievements
Rank 1
Dobromir
Telerik team
Share this question
or