HELP - Shrunken RadGrid ScrollView when trying to expand Grid to fill containing Div element

[Manny]

Hi All,

I'm in a bit of a pickle with a strange behavior from RadGrid. I am trying to have my grid expand to fill its containing DIV element - 100%height and width (see image 1 attached to this post). However, what is currently happening is that on first loading the page, the grid does not expand, but instead its scroll area is shrunken to something like 10px (see image 2 attached) - and after I click on the pager button it then expands to fill the div. If I reload the page it returns back to the shrunken scroll area behavior again.

The page is designed with the RadGrid inside a RadSplitter (Telerik has a roughly similar example here) and the RadGrid also implements the "OnGridCreated" client event. I have created a small Visual Studio project that can be run to demo this behavior - it is publicly available for download here.

This issue has left me in a serious bind and in need of quick resolution. My environment: Win 2008 R2 server; IE 9, Chrome v29; V.Studio 2010; .Net 3.5; RadControls for ASP.NET AJAX Q2 2012. I should point out that I tried to do the same thing, but replacing RadSplitter with a standard html table - I got the same odd behavior, but was able to get it to behave almost correctly by setting the "height" style attribute of the containing table column (yes, I also set the height of the RadPane in the splitter, but no luck). It seems to point to the height of the containing element, but I have run out of ideas of what I'm missing...not sure if its me or the controls.

Thanks for your help.

- Manny.

[Vessy]

Hello Manny,

Thank you for the provided in the ticket project.

I investigated it and it turned out that the issue is caused by the way you are updating the Grid. During the AJAX update the updated element is wrapped inside an update panel, which appears to be a parent to the respective updated element. You could configure the height of the panel through the UpdatePanelHeight property:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelHeight="100%"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelHeight="100%"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

I hope this wold help.

Regards,
Veselina Raykova
Telerik

[Manny]

Thank you Veselina. I'll try it out and let you know.

[Vessy]

Hi Manny,

Thank you for the update. Let me know whether the provided solution meets your goals.

Looking forward to hearing from you,
Veselina Raykova
Telerik

[Manny]

It worked! Thanks for the help with this.