Problem With Grid Sizing

[Elliot]

I have a grid that I am attempting to size based on the div size that contains it.  I am using the following code:

function resizeGrid(h) {

        var gridElement = $("#grid"),

            dataArea = gridElement.find(".k-grid-content"),

            gridHeight = h,

            otherElements = gridElement.children().not(".k-grid-content"),

            otherElementsHeight = 0;

        otherElements.each(function () {

            otherElementsHeight += $(this).outerHeight();

        });

        dataArea.height(gridHeight - otherElementsHeight);

    }
It is based on a fiddle that Dimo posted in another thread.  The h parameter is the height of the div that contains the grid.

The problem is that when the page is first loaded the grid causes a scrollbar to appear.  If I then resize the browser or maximize the grid appears as it should.  How can I get it set to the correct height on first load?

I have attached two images one showing the grid as it appears on load and one after any resize or maximze etc...

[Dimo]

Hello Elliot,

The problem may be caused by the following:

1. The Grid sizing logic may be executed too early. You can try wrapping it in a setTimeout

2. Based on the screenshots, it seems that there is some div padding or Grid margin applied (there is empty space between the Grid and the div). If this is the case, you need to adjust the calculations.

Here is the original example, which works correctly. You can compare it with your scenario.

http://jsfiddle.net/dimodi/MjKmJ/

All the best,
Dimo
the Telerik team