grid not resizing

[Murray]

Tried to resize grid when browser resizes but no change in height. Doing the following:
javascript:
window.onresize = ResizePage;

function ResizePage()
{
    ResizeGrid();
}

function ResizeGrid()
{   
    var gridClient = $find("<%= grdVouchers.ClientID %>");

    if (gridClient != null)
    {
        var gridHeight = document.documentElement.clientHeight - 96;
        var scrollArea = gridClient.GridDataDiv;
        var heightBefore = scrollArea.style.height;

        if (gridHeight > 122)
            scrollArea.style.height = gridHeight + "px";
        else
            scrollArea.style.height = "122px";
        var heightAfter = scrollArea.style.height;
        alert("resize:" + heightBefore + ":" + heightAfter);
    }
}
...
aspx tags:
...
<telerik:RadGrid ID="grdVouchers"
    runat="server"
    Skin="Office2007"
    OnNeedDataSource="grdVouchers_NeedDataSource"
    OnDetailTableDataBind="grdVouchers_DetailTableDataBind"
    OnItemCommand="grdVouchers_ItemCommand"
    AllowFilteringByColumn="True"
    AllowPaging="True"
    AllowCustomPaging="true"
    GridLines="None"
    PageSize="12"
    AutoGenerateColumns="False"
    Width="100%"
    Height="480px"
    CellPadding="0">
    <ClientSettings
            AllowColumnsReorder="True"
            ColumnsReorderMethod="Reorder">
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        <Selecting AllowRowSelect="True" />
        <ClientEvents
            OnColumnContextMenu="ColumnContextMenu"
            OnGridCreated="GridCreated"
            OnRowDblClick="RowDblClick"
            OnRowContextMenu="RowContextMenu"
            OnColumnResized="ColumnResized"
            OnColumnSwapping="ColumnSwapping" />
        <Resizing AllowColumnResize="True"
            EnableRealTimeResize="False"/>
        <ClientMessages DragToGroupOrReorder="Drag column to reorder" />
    </ClientSettings>
...

[Princy]

Hi Murray,

Go through the following code library submission and see whether it helps.
Setting 100% height and resize on container resize for grid with scrolling and static headers

Thanks
Princy.

[Pamela]

I have tried the sample program previously suggested, but am still unable to get the height to resize automatically when set to 100%. The result I see is the grid rendered with about a 40px height--just enough to see the header row and about 1/2 of the first data row.

The web apge is organized such:
- Update panel containing containing various drop-down lists used to provide filtering info to my database query.
- "Display Data" command button that provides the query to the grid databinding
- The RadGrid

For production purposes, I need the command button and the grid to reside in an update panel. For test purposes, I removed the grid from the update panel and I observer that upon screen refresh, the grid briefly sizes itself to about 400px (I'm guessing here...) and then very quickly resizes to the 40px height I describe above

I'm running VS 2005, with Rad Controls for Ajax, dll version 2008.2.826.20 and IE6.

aspx snippet is as follows:

<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; padding-bottom: 10px; padding-top: 10px;">

<tr>

<td width="100%" valign="top">

<asp:Button ID="cmdDisplayData" runat="server" OnClick="cmdDisplayData_Click" Text="Display Data" Width="110px" /></td>

</tr>

</table>

<telerik:radgrid id="RadGrid1" runat="server" onitemdatabound="RadGrid1_ItemDataBound" OnColumnCreated="RadGrid1_ColumnCreated" OnPreRender="RadGrid1_PreRender" Skin="Office2007" Height="100%" Width="100%">

<MasterTableView TableLayout="Fixed" />

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>

<Resizing AllowColumnResize="True" />

</ClientSettings>

<FilterMenu EnableTheming="True" Skin="Office2007"></FilterMenu>

<ExportSettings ExportOnlyData="True" FileName="SAMSystemInfo"></ExportSettings>

</telerik:radgrid>

I'd appreciate any assistance you could give as I am evaluating the purchase of the Telerik controls.

Thanks,
Pam

[Dimo]

Hi Pamela,

On browser resize RadGrid makes some calculations of its own, which control its layout and dimensions (when using static headers). That is why you'd better change the control's height and let the scrollArea adjust automatically:


<telerik:RadGrid ID="grdVouchers"
    runat="server"
    Skin="Office2007"
    OnNeedDataSource="grdVouchers_NeedDataSource"
    AllowFilteringByColumn="True"
    AllowPaging="True"
    AllowCustomPaging="true"
    PageSize="12"
    Width="100%"
    Height="480px">
    <ClientSettings
            AllowColumnsReorder="True"
            ColumnsReorderMethod="Reorder">
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        <Selecting AllowRowSelect="True" />
        <Resizing AllowColumnResize="True"
            EnableRealTimeResize="False"/>
        <ClientMessages DragToGroupOrReorder="Drag column to reorder" />
    </ClientSettings>
</telerik:RadGrid>


window.onresize = function()
{  
    var gridClient = $find("<%= grdVouchers.ClientID %>");

    var gridHeight = document.documentElement.clientHeight;
    var scrollArea = gridClient.GridDataDiv;
    var heightBefore = scrollArea.style.height;

    if (gridHeight > 200)
    {
        gridClient.get_element().style.height = gridHeight + "px";
    }
    else
    {
        gridClient.get_element().style.height = "200px";
    }
    var heightAfter = scrollArea.style.height;
}


Sincerely yours,
Dimo
the Telerik team

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

[Pamela]

Dimo,

Actually, the grid shows as I described it when it is first rendered--even before I attempt to resize. Given that the specs on the grid indicate that it can be set to fill 100% of its container, I would have expected the grid to render properly.

Do I have to exercise the resize javascript just to get the grid to render properly upon page load?

Thanks,
Pam

[Dimo]

Hello Pamela,

The custom Javascript code in my previous post was intended to work with the RadGrid in your first message, where the RadGrid's height is set to 480px.

If you set the grid's height to 100%, the control will expand to the full height of its parent and will resize automatically if the parent resizes. However, there is one requirement for this, which is derived from the way browsers apply heights in percentage:

If a web page element has a height set in percent, its parent must have a height as well.

This applies to all kinds of web page elements, not just web controls, or RadGrid in particular. In addition, the rule applies recursively - if the RadGrid's parent has its height defined in percent, you need to go up and set height to the parent's parent as well.

If the RadGrid's parent is an update panel or RadGrid is ajaxified by RadAjaxManager, you need to add a height style also to the <div> element, which is added by the update panel / RadAjaxManager. Here is how:

How to Set 100% Height to a RadAjaxManager's Update Panel


By the way, it is highly recommended that a web page element with its height set to 100% does NOT have any siblings in the DOM tree, otherwise overflowing occurs in most browsers.


Let us know if you need more information.


Best wishes,
Dimo
the Telerik team

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

[Alexandre]

<telerik:RadGrid ID="grdVouchers"
    runat="server"
    Skin="Office2007"
    OnNeedDataSource="grdVouchers_NeedDataSource"
    AllowFilteringByColumn="True"
    AllowPaging="True"
    AllowCustomPaging="true"
    PageSize="12"
    Width="100%"
    Height="480px">
    <ClientSettings
            AllowColumnsReorder="True"
            ColumnsReorderMethod="Reorder">
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        <Selecting AllowRowSelect="True" />
        <Resizing AllowColumnResize="True"
            EnableRealTimeResize="False"/>
        <ClientMessages DragToGroupOrReorder="Drag column to reorder" />
    </ClientSettings>
</telerik:RadGrid>


window.onresize = function()
{
    var gridClient = $find("<%= grdVouchers.ClientID %>");

    var gridHeight = document.documentElement.clientHeight;
    var scrollArea = gridClient.GridDataDiv;
    var heightBefore = scrollArea.style.height;

    if (gridHeight > 200)
    {
        gridClient.get_element().style.height = gridHeight + "px";
    }
    else
    {
        gridClient.get_element().style.height = "200px";
    }
    var heightAfter = scrollArea.style.height;
}

I have the same problem and i have use the solution proposed but there is a problem. If the aspx page contening the grid is opened from a RadWindow, the onresize is called infinitly.

Any advice on this?

[Dimo]

Hello Alexandre,

You need the custom Javascript which resizes RadGrid only if RadGrid has sibling controls/elements. Is this the case? If not, then please refer to the following examples:

Setting 100% height and resize on container resize for grid with scrolling and static headers

If RadGrid is ajaxified, you will also need:

How to Set 100% Height to a RadAjaxManager's Update Panel


If RadGrid has sibling elements, you can also use a RadSplitter-based layout inside the RadWindow. Place the RadGrid and its sibling elements in separate panes.


Regards,
Dimo
the Telerik team

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

[senthil]

Hi Murray ,

I am getting height resize through following coding
 var dataHeight = document.getElementById("ctl00_ContentPlaceHolder1_rdgScannout_ctl00");       
            if(dataHeight.clientHeight < (document.documentElement.clientHeight - 280))
            {
              $get("<%= rdgScannout.ClientID %>").style.height = dataHeight.clientHeight + 55 + "px";
              $find("<%= rdgScannout.ClientID %>").repaint();
            }
            else
            {
              if(document.documentElement.clientHeight < 375 )
              {
                 $get("<%= rdgScannout.ClientID %>").style.height = 100 + "px" ;
              }
              else
              {
                  $get("<%= rdgScannout.ClientID %>").style.height = document.documentElement.clientHeight - 280 + "px";
                  $find("<%= rdgScannout.ClientID %>").repaint();            
              }
            }
            this is for all resolution. But not able to achieve the width resize for all resolution. Please give some useful tips for me