grid not resizing

9 posts, 0 answers
  1. Murray
    Murray avatar
    40 posts
    Member since:
    Jun 2007

    Posted 10 Jul 2008 Link to this post

    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>
    ...
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Jul 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pamela
    Pamela avatar
    2 posts
    Member since:
    Sep 2008

    Posted 17 Sep 2008 Link to this post

    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

  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 18 Sep 2008 Link to this post

    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.
  6. Pamela
    Pamela avatar
    2 posts
    Member since:
    Sep 2008

    Posted 18 Sep 2008 Link to this post

    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
  7. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 21 Sep 2008 Link to this post

    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.
  8. Alexandre
    Alexandre avatar
    8 posts
    Member since:
    Nov 2008

    Posted 02 Dec 2008 Link to this post

    <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?

  9. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 03 Dec 2008 Link to this post

    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.
  10. senthil
    senthil avatar
    23 posts
    Member since:
    Dec 2008

    Posted 08 Apr 2009 Link to this post

    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

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017