Setting scrolling grid to 100% inside splitter RadPane

[Iggy]

Hello,

I have a scrolling grid using static headers and no paging.  I need to have the grid expand inside it's container but I've gone through the forums for the splitter and grid as well as the code library and I can't seem to get it to work correctly. 
I want the grid to scroll, not the splitter pane so that the column headers stay on the screen.  Also, if it's not too much to ask I'd like to be able to have the grid resize when the screen resizes and causes the splitter to resize.

The page is set up with a splitter as the main control set for a horizontal orientation.  In the splitter there are 2 RadPanes.  The top one contains header text and a toolbar.  The bottom one contains the grid.  Around the grid I added a div just for padding.

What is happening with this setup is the splitter occupies 100% of the page correctly.  The bottom pane expands to fill the rest of the page under the header, which is correct.  But the grid opens to around 200px high and 40px wide and then immediatly snaps to full width (which is correct) but only shows the column headers and another 10px (around 30px total height).

Attached is a screen shot of the grid after it expands.

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

<telerik:RadSplitter ID="rsMain" runat="server" Height="100%" Width="100%" Orientation="Horizontal">
    <telerik:RadPane ID="rpTop" runat="server" Height="110px" Locked="true">
        <div style="padding: 10px; padding-bottom:0;">
            This is my page header
            <div style="padding-bottom: 20px">
                <telerik:RadToolBar ID="rtbToolbar" runat="server">
                    <Items>
                        <telerik:RadToolBarButton runat="server" SkinID="FolderUp" id="rtbbBack" PostBack="false"></telerik:RadToolBarButton>
                        <telerik:RadToolBarButton runat="server" SkinID="Refresh" id="rtbbRefresh" PostBack="false"></telerik:RadToolBarButton>
                    </Items>
                </telerik:RadToolBar>
            </div>
        </div>
    </telerik:RadPane>
    <telerik:RadPane ID="rpBottom" runat="server" Height="100%">
        <div style="padding: 10px; padding-top: 0;">
            <telerik:RadGrid ID="rgMyGrid" runat="server" OnNeedDataSource="rgMyGrid_NeedDataSource" Height="100%" Width="100%">
                <ClientSettings>
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                </ClientSettings>
                <MasterTableView AutoGenerateColumns="false" TableLayout="Auto">
                    <Columns>
                        <telerik:GridHyperLinkColumn UniqueName="Name" DataTextField="Name" DataNavigateUrlFields="DetailsUrl" HeaderText="Name">
                        </telerik:GridHyperLinkColumn>
                        <telerik:GridImageColumn UniqueName="IsCustom" HeaderStyle-Width="60px" HeaderText="Custom" DataImageUrlFields="IsCustomImageUrl"
                            ItemStyle-HorizontalAlign="Center" />
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </div>
    </telerik:RadPane>
</telerik:RadSplitter>

Anyone have any ideas?

[Iggy]

Forgot to mention, using Telerik Ajax version 2010.1.309.35.

[Pavlina]

Hello Iggy,

Go through the following code library, which elaborates on how to configure RadGrid to occupy 100% height of its container (or the total browser window height) with scrolling and static headers enabled.
Setting 100% height and resize on container resize for grid with scrolling and static headers

Give it a try and let me know if further assistance is needed.

Best wishes,
Pavlina
the Telerik team

[Iggy]

I had already gone through that code library.  Following it gets me the grid that I have attached above where it shows the column headers and only around 10px of the body.  If I remove the Height="100%" on the grid then the grid shows with the body around 300px high but it doesn't stretch to the height of the container.

[Pavlina]

Hi Iggy,

Unfortunately the provided code lines are not sufficient to pinpoint the reason for the problem. Please, open up a formal support ticket and send a runnable version of your implementation. We shall debug it and get back to you with our findings.

Thank you.

Kind regards,
Pavlina
the Telerik team

[Iggy]

Ok, I figured out what's causing it.  While creating a test project it was working fine until I added the RadAjaxManager and ajaxified the grid. 

Here's my sample code:

aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SplitterGridText._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
        html
        {
            overflow:auto;
        }

        html,
        body,
        form
        {
            margin:0;
            height:100%;
        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" >
        </asp:ScriptManager>
        <telerik:RadSplitter ID="rsMain" runat="server" Height="100%" Width="100%" Orientation="Horizontal">
            <telerik:RadPane ID="rpTop" runat="server" Height="110px" Locked="true">
                <div style="font:16pt Tahoma">My Resizing Test Grid</div>
            </telerik:RadPane>
            <telerik:RadPane ID="rpBottom" runat="server" Height="100%" Scrolling="none">
                    <telerik:RadGrid ID="rgTestGrid" runat="server" OnNeedDataSource="rgTestGrid_NeedDataSource" Width="100%" Height="100%">
                        <ClientSettings EnableRowHoverStyle="true">
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                        </ClientSettings>
                        <MasterTableView AutoGenerateColumns="false" TableLayout="Fixed">
                            <Columns>
                                <telerik:GridBoundColumn DataField="name" HeaderText="Name"></telerik:GridBoundColumn>
                            </Columns>
                        </MasterTableView>
                    </telerik:RadGrid>
            </telerik:RadPane>
        </telerik:RadSplitter>
        <telerik:RadAjaxManager ID="ramMain" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rgTestGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rgTestGrid" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
    </form>
</body>
</html>

.cs

protected void rgTestGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
    List<string> names = new List<string>();
    for (int i = 0; i < 50; i++)
    {
        names.Add("Grid Entry " + i);
    }

    rgTestGrid.DataSource = from name in names
                            select new {name};
}

[Iggy]

Wrapping this in an ajax panel has the same results and so does adding the grid dynamically to the ajax manager.  Does anybody have any ideas on how to solve this issue or can you just not use ajax with the grid anymore?

[Pavlina]

Hello Iggy,

Thank you for the provided code. However, I was not able to replicate the described issue as you can see for this video. Please examine it and let me know if I am leaving something out while testing. Attached to this message is the test project.

Regards,
Pavlina
the Telerik team

[Iggy]

I have opened a support ticket on this issue: 324310
I watched the video you created and the code looks identical so I attached my full test project to the support ticket and hopefully you can reproduce the issue with it.

Thanks.

[Dimo]

Hello Iggy,

You also need to set 100% height style to the update panel, which is generated around RadGrid. This is a CSS standards' requirement related to elements with percentage heights (in this case - RadGrid).

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

All the best,
Dimo
the Telerik team