How to adjust size of grid within a splitter

[Galen Giebler]

 I am using the ASP.NET MVC server side wrappers to create a page with a splitter control with 3 horizontal panes.  Each pane includes a single <div> with header text, and a Kendo Grid.

How do I get the grid to resize appropriately within each pane?
I have tried the following, but the splitterPane.scrollHeight value does not seem correct when the pane gets smaller.  For example, when the page starts all panes report a scrollHeight of 278, but if I move the top splitter up, the scrollheight of the top pane goes to up to 280 instead of being reduced..
I have tried to find another property/method other than scrollHeight and have been unsuccessful..
Any help is greatly appreciated!!!

function LayoutChange() {
    UpdateGridSize("#PendingVessels", 0);
    UpdateGridSize("#DueToSellVessels", 1);
    UpdateGridSize("#DueToShiftVessele", 2);
}

function UpdateGridSize(gridName, indexPane) {
    var splitter = $("#Main");
    var splitterPane = splitter.find(".k-pane")[indexPane];
    var splitterHeight = splitterPane.scrollHeight;

    var gridElement = $(gridName),
        dataArea = gridElement.find(".k-grid-content"),
        //gridHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
    otherElements.each(function () {
        otherElementsHeight += $(this).outerHeight();
    });

    gridElement.height(splitterHeight - 25);  //-25 for the header item
    dataArea.height(gridElement.innerHeight() - otherElementsHeight);
}

[Dimo]

Hi Galen,

If you want the Grids to resize in such a way, so that the Splitter panes are not scrollable, then you should measure offsetHeight instead of scrollHeight.

Regards,
Dimo
Telerik