Splitter resize to content partly working

[Steve]

Hello,
I am trying to resize a splitter and its panes to the size of the content within the panes, and it is only partially working. I'm using 2013.1.417.40 of the Telerik.Web.UI controls.

The application scenario is a reports page, where the user can select a report from a list, tweak some report settings, and then view the report.  To this end, I have a RadComboBox/RadTreeView that allows the user to select which report to view.  Below this, I have a RadSplitter with a top pane, a splitbar, and a bottom pane.  The top pane contains a set of controls that are specific to each report.  The bottom pane is the report viewing area.  Because each report might have a different method of displaying the data, the bottom pane contains a user control that contains multiple user controls, one for each report or group of similar reports.  Within each of these lower level user controls could be a RadGrid or a charting control.

My requirements are such that there should be no scrolling within the report's grid or the  splitter panes.  All scrolling must be performed using the browser scrollbars.  Therefore, I would like to resize the splitter and the panes according to the size of the content within each pane.  For the top pane, I only have two sets of possible report controls, so I know the two possible sizes that the pane could be, and I just pass those sizes.  No problem there.  For the bottom pane, I implemented the technique described in the KB article here.  For my purpose, however, I did not want to perform the sizing in OnClientLoad, because the content is always empty until the user selects a report.  Instead, I start out with a pane height of 100px at page load.  I then size both panes when the user selects a report, and also when the data is populated in the grid or chart.

Here is some of the code.  The actual .aspx is quite large, so I've removed code that I don't think is relevant to the issue.

javascript function;

function resizeSplitter(paneControlsHeight) {
    var splitter = $find("<%= splitterMain.ClientID %>");
    if (splitter) {
        var paneControls = splitter.getPaneByIndex(0);
        var paneReportView = splitter.getPaneByIndex(1);
        if (paneControls && paneReportView) {
            paneControls.set_height(paneControlsHeight);
            paneControls.set_maxHeight(paneControlsHeight);

            var height = paneReportView.getContentElement().scrollHeight;
            paneReportView.set_height(height);
            var splitBar = splitter.getSplitBarByIndex(0);
            splitter.set_height(paneControlsHeight + splitBar.getHeight() + height);
        }
    }
}

ASPX markup:

<telerik:RadSplitter ID="splitterMain" runat="server" Orientation="Horizontal" Width="973">
<telerik:RadPane runat="server" id="paneControls" Width="100%" Height="250" MaxHeight="250" Scrolling="None" >
    <!-- All sorts of controls go here that allow the user to change the scope and display of their report data.
         Includes RadDatePickers, RadComboBoxes, RadTreeViews, asp:DropDownLists, etc. -->
</telerik:RadPane>
<telerik:RadSplitBar runat="server" id="splitBarMain1" CollapseMode="Forward" />
<telerik:RadPane runat="server" id="paneReportView" Width="100%" Height="100" Scrolling="None" >
    <div id="divReportView" style="width:970px; border:none;margin-top:7px; background-color:#EEEEEE; overflow:hidden;" runat="server">
        <analytics:AllReportsViewControl ID="allReportsViewControl" runat="server" ></analytics:AllReportsViewControl>
    </div>
</telerik:RadPane>
</telerik:RadSplitter>

and some relevant code in the .cs:

private void ResizeSplitterOnClient(Report report)
{
    if (report != null)
    {
        // Just determine which of two heights the top pane will get.
        int paneControlsHeight = 450;
        // ReportFilterControls.GeographyControls and ReportFilterControls.CommodityTree should be mutually exclusive, as they occupy the same real estate.
        if (report.FindFilterControl((int)ReportFilterControls.CommodityTree) != null)
        {
            paneControlsHeight = 250;
        }
        // And tell the client to call its resizeSplitter function.
        RadAjaxManager.GetCurrent(this).ResponseScripts.Add(string.Format("setTimeout('resizeSplitter({0});',100);", paneControlsHeight));
    }
}

The ResizeSplitterOnClient method is called when the user selects a new report, as well as whenever the currently active RadGrid's NeedDataSource event is fired.  This could occur when the grid is first loaded with data, or when a page-indexing or page-sizing event occurs.

When all is said and done, the dynamic sizing works fine the first time that the grid is populated.  The initial size of the bottom page is 100, and when the user triggers the data to be bound to the grid for the first time, the grid is loaded at a default of 50 rows per page.  I can see in the client that the value of the height variable in the resizeSplitter javascript function is 1337, thus setting the bottom pane and splitter height correctly.  However, when I do something that changes the grid height, such as changing the page size down to 20, height becomes 1334, and the resize leaves a whole lot of empty space between the bottom of the much-smaller grid and the bottom of the bottom pane.  If I continue further and set the page size to 10, height becomes 1331.  If I move to the last page in the data set which only contains one row, height becomes 1328.  If I go back to the first page, which contains 10 rows again, height becomes 1325.  It seems like on each postback, the number drops by 3 pixels, regardless of the actual content of the pane.

Please can somebody take a look and tell me what I'm doing wrong?
Thanks.

[Steve]

Update:

I still don't know why the statement:

var height = paneReportView.getContentElement().scrollHeight;

returns the incorrect value on subsequent postbacks, but I have found a workaround.

I simply add another statement before that, to set the paneReportView's height back to its original value of 100, prior to determining the scrollHeight, like so:

paneReportView.set_height(100);
var height = paneReportView.getContentElement().scrollHeight;

paneReportView.set_height(height);

For some reason, resetting the pane's height to a small value causes thegetContentElement().scrollHeight to return the correct value every time.