100% height lost by RadAjaxmanager

[Marco]

Hello,

In IE8 and FF3 i run into a strange problem.

I know all about the 100% solution, and use this standard on every page.
e.q. 

    <style type="text/css">
        html, body, form
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>

 

If i use a simple radgrid with Scrolling-UseStaticHeaders="true" on a page, without any container or other control, the grid is 100% heigth, and this is working perfect.
But as soon as i put a RadAjaxmanager on the page, the RadGrid is going from 300px to 10 px in a split second when the page load, and stays 10px.
e.q. 

 

    <telerik:RadAjaxManager ID="RAM" runat="server" >
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="myRadrid (or any other control)">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="myRadGrid" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

 

For testing i put the Radgrid inside the form container, so the heigth for the container is set.
I can write a workaround in js to follow the window height, but that is not real smooth solution.
The Grid is then loading from 300px, to 10px, and then the right height...

I'am sure the RadAjaxmanager is the reason for this, but is there a solution?
p.s. i use the latest 2009.1 402 build.

 

[Marco]

Well i found a solution, but didn't found this on this site. (so i reply myself if someone run into the same problem)
(Maybe it is mentioned some where, and i overlooked it)

Its realy simple to give the radgrid the 100% height, if the radGrid behaving like i mentioned above.

The only thing that i had to do, was instead of:

    <style type="text/css">
        html, body, form
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>

I had to write:

        <style type="text/css">
            html
            {
                overflow: auto;
            }
            html, body, form, #myRadGridPanel
            {
                margin: 0;
                height: 100%;
            }
        </style>

The #myRadGridPanel is refering to myRadGrid in the above example.
So nothing else then this, and it is working perfect now...

[Yeroon]

I am having the same problem. Grid being in RadPane (splitter construct). Working just fine at 100% height. Added AjaxManager and it broke. 10px all that is left. Unfortunately your solution didnt help in my situation. When I find a solution, I will post it here.

[Sebastian]

Hi guys,


I think that the solution from the code library thread linked below will help you address the discrepancy you encountered:

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx

Best, Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Yeroon]

Hi,

Thanks for your solution. It fixed my problem. Using a RadAjaxPanel with Height of 100%  also fixes this, but then too many controls get ajaxified (performance issue), so this is a lot better.

Thanks again.

Yeroon

[James]

I realize this is a terribly old thread but I just ran into this problem today. This is a horribly kludgey fix. Isn't there a way this could be fixed inside of the controls themselves so that I don't have to add lines of code to every page that has a 100% height grid in it?

[Dimo]

Hi James,

We will research for ways to add height styles to generated updated panels out-of-the-box for some of the future versions of RadAjaxManager.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Dominik Gierse]

Is there today any out-of-the-box solution to resolve this problem?

Best Regards.

[Tsvetina]

Hello Uwe,

Have you tried using the UpdatePanelHeight property of the AjaxUpdatedControl tag in the RadAjaxManager's settings? It provides the ability to set height explicitly for the update panel generated by the setting.

All the best,
Tsvetina
the Telerik team

[Michael]

I'm having the same problem, except in my case the grid is in a user control that has a RadAjaxManagerProxy.  Is there a solution to this issue?

[Tsvetina]

Hello Michael,

Could you please elaborate a little more on the problem you are experiencing? In this thread more than one problems were mentioned and resolved.

In case the user control is not initially visible on the page and when visibility is switched and a grid with static headers inside it loses it height (for example in a tab strip), you could try calling repaint() on the grid in its client-side GridCreated event.

Kind regards,
Tsvetina
the Telerik team

[Michael]

I have a RadGrid within a user control where the RadGrid Height is set to 100% and it uses a RadAjaxManagerProxy.  When the control is rendered on a page the RadGrid comes up at 100% height and immediately resizes itself to about 10px, not 100% height.  This is very similar to the issue posted by Marco, except it involves using a RadGrid within a usercontrol and a RadAjaxManagerProxy.

[Tsvetina]

Hi Michael,

Did you try setting the UpdatePanelHeight property to 100%? This is equivalent to what Marco and Yeroon did, only difference is that they needed to do it manually since the property was not available back then.

All the best,
Tsvetina
the Telerik team

[Michael]

Thank you.  That worked if the grid was in a container where the px were set. I found a solution using javascript that works for me: http://www.telerik.com/community/forums/aspnet-ajax/grid/resize-radgrid-to-window-height-via-javascript.aspx