Shrinking RadSplitter

5 posts, 0 answers
  1. Shane
    Shane avatar
    18 posts
    Member since:
    Jan 2011

    Posted 21 Oct 2011 Link to this post

    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" "">
    <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;
                width: 100%;
                height: 100%;
                border-style: none;
                background-color: #FFFFFF;
                color: #000000;
                border-collapse: collapse;
    <body class="BODY">
    <form id="test" runat="server">
    <telerik:RadScriptManager ID="supportScripts" runat="server" >
    <%  // 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 />
            <telerik:RadPane ID="messagePane" runat="server" Scrolling="None" BackColor="Orange" >
                    Random stuff here<br />
                    With lines and such<br />
            <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 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>
    I put all the code in the ASPX for clarity sake.  Is this a bug or am I just doing something wrong here?
  2. Shane
    Shane avatar
    18 posts
    Member since:
    Jan 2011

    Posted 21 Oct 2011 Link to this post

    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,
  3. DevCraft R3 2016 release webinar banner
  4. Shane
    Shane avatar
    18 posts
    Member since:
    Jan 2011

    Posted 21 Oct 2011 Link to this post

    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.
  5. Shane
    Shane avatar
    18 posts
    Member since:
    Jan 2011

    Posted 25 Oct 2011 Link to this post

    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">
            function () {
                var splitter = $find("<%= RadSplitterMaster.ClientID %>");
                splitter.resize(splitter.get_width() - 1, splitter.get_height() - 1);
            }, 100);
  6. Dobromir
    Dobromir avatar
    1633 posts

    Posted 27 Oct 2011 Link to this post

    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.

    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
Back to Top
DevCraft R3 2016 release webinar banner