content div disappears with telerik grid

[kyle]

We have a asp.net with a content area that has abosolut position turned on. Inside this area we have a telerik grid using the outlook2007 skin.  When the grid has data via the needsdatasource event the entire content div shrinks up to almost nothing. Strange thing is that when the we comment our the needdatasource event and the grid displays nothing but  a shell the div does not shrink/disappear.  In issue doesnt show itself in FireFox.

Thanks,
Kyle

[Dimo]

Hi Kyle,

You can check the support ticket that you sent us for a solution.

By the way, if you post a forum thread and a support ticket at the same time for the same problem, please mention that in the support ticket. Thanks.

All the best,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[kyle]

For anyone that has this same type of issue here was the fix:

When used with static headers, RadGrid readjusts some of its dimensions on the client. Apparently, some of the calculations and size settings disturb the browser and it redraws the RadGrid container divs with wrong height, although the RadGrid inside has a correct height (I checked that). When you comment out the NeedDataSource, RadGrid is rendered unbound and in this case it does not resize automatically on the client. That's why the problem is not exhibited.

I don't think there is anything we can do in the RadGrid code to prevent the container collapse, but I can offer you the following workaround, which works well on my test page:

Javascript

window.onresize = function()
{
    if ($telerik.isIE)
    {
        if ($get("contentZone").clientHeight < $get("contentZone").scrollHeight)
        {
            $get("container").style.height = document.documentElement.clientHeight + "px";
        }
    }
}


Content zone style was defined as follows and was a div that wrapped our content area of the master page/content form that would shrink/disappear.

#contentZone
{
    position: absolute;   
    top: 5px;
    bottom: 5px;
    padding: 4px;
    right: 3px;
    left: 5px;
    border: solid 1px rgb(185,187,217);
    background-color: rgb(255,255,255);
    overflow: auto;
}