RadGrid Height 100% & ScrollHeight 100%

17 posts, 0 answers
  1. Kris
    Kris avatar
    9 posts
    Member since:
    Jun 2008

    Posted 25 Jun 2008 Link to this post

    I'm trying to setup a RadGrid in a Table that has a height and width set to 100% so that it can expand and contract as the user resizes their browser (I'm only using IE).  Inside the table I'd like to setup the RadGrid so that it will automatically expand and contract to fill the container (table cell) and to scroll the records when necessary.  In other words, I want the column headers to stay fixed at the top, the paging portion to stay fixed at the bottom and the scroll bar to show up for the data records if the page is not large enough to display all the records.

    FYI... the records per page is a variable loaded at runtime.

    I've found some other threads in the forum that talk about different work arounds using javascript at runtime.  I've tried this and it works sometimes.  But due to the complexity of my page, when some of the other javascript on the page executes it causes the RadGrid to collaps in size so that only the header, footer and a sliver of one record is visible.  There has to be a more stable way.

    If I try to set the RadGrid height to 100% and the scroll height to 100% the grid also shriks its height to almost nothing.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Jun 2008 Link to this post

    Hi Kris,

    Try setting the UseStaticHeader property to true to make the Column headers fixed.

    ASPX:
     <ClientSettings > 
       <Scrolling UseStaticHeaders="true" AllowScroll="true" /> 
     </ClientSettings> 


    Thanks
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kris
    Kris avatar
    9 posts
    Member since:
    Jun 2008

    Posted 26 Jun 2008 Link to this post

    Removing the ScrollHeight="100%" from the scrolling object didn't make a difference.  I did however find somthing interesting.  I'm using a RadAjaxManager to try and "AJAXify" the grid.  When I select the RadGrid in the RadAjaxManager configuration tool the height colapses to nothing.  If I remove the RadGrid from the RadAjaxManager then the grid appears normally.

    Here is a sample of my .ascx.  Note: this is contained in a user control.

    <%

    @ Control Language="vb" AutoEventWireup="false" CodeBehind="GridViewer.ascx.vb" Inherits="FS.Web.GridViewer" %>

    <%

    @ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

     

    <

    telerik:RadScriptManager ID="ScriptManager1" runat="server"

    EnableTheming="True">

    </

    telerik:RadScriptManager>

     

    <

    telerik:RadAjaxManager runat="server"

     

    ID="RadAjaxManager1">

     

    <ClientEvents/>

     

    <AjaxSettings>

     

    <telerik:AjaxSetting AjaxControlID="RadGrid1">

     

    <UpdatedControls>

     

    <telerik:AjaxUpdatedControl ControlID="RadGrid1"

    LoadingPanelID="RadAjaxLoadingPanel1" />

     

    </UpdatedControls>

     

    </telerik:AjaxSetting>

     

    </AjaxSettings>

    </

    telerik:RadAjaxManager>

    <

    table id="tblMain" cellpadding="0" cellspacing="0"

     

    style

    ="border: thick solid yellow; table-layout: fixed; width: 100%;height:100%">

     

    <tr>

     

    <td valign="top">

     

    <telerik:RadToolBar ID="RadToolBar1" Runat="server" Skin="Inox" Width="100%">

     

    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

     

    </telerik:RadToolBar>

     

    </td>

     

    </tr>

     

    <tr>

     

    <td valign="top" style="border: medium solid Red; height:100%">

     

    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True"

    AutoGenerateColumns="False" GridLines="None"

    Skin="Office2007" Width="100%" AllowMultiRowSelection="True" AllowSorting="True"

    Height="100%" >

     

    <exportsettings filename="Export" ignorepaging="True" openinnewwindow="True">

     

    </exportsettings>

     

    <ItemStyle Wrap="True" />

     

    <MasterTableView>

     

    <RowIndicatorColumn Visible="False">

     

    <HeaderStyle Width="20px"></HeaderStyle>

     

    </RowIndicatorColumn>

     

    <ExpandCollapseColumn Visible="False" Resizable="False">

     

    <HeaderStyle Width="20px"></HeaderStyle>

     

    </ExpandCollapseColumn>

     

    <Columns>

     

    <telerik:GridBoundColumn DataField="UID" HeaderText="UID" UniqueName="UID">

     

    </telerik:GridBoundColumn>

     

    </Columns>

     

    <EditFormSettings>

     

    <PopUpSettings ScrollBars="None"></PopUpSettings>

     

    </EditFormSettings>

     

    <PagerStyle Mode="NextPrevAndNumeric" />

     

    </MasterTableView>

     

    <ClientSettings EnableRowHoverStyle="True" AllowColumnsReorder="True"

    ReorderColumnsOnClient="True">

     

    <selecting allowrowselect="True" />

     

    <ClientEvents OnRowDblClick="RowDblClick" />

     

    <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="100%" />

     

    <Resizing AllowColumnResize="True" />

     

    </ClientSettings>

     

    </telerik:RadGrid>

     

    </td>

     

    </tr>

    </

    table>

    <

    telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"

    height="100%" InitialDelayTime="1" Transparency="30" width="100%" BackColor="#E0E0E0"

    HorizontalAlign="Center">

     

    <img alt="Loading..."

    src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.LoadingProgressBar.gif") %>'

    style="border: 0px; margin-top: 200px;" />

    </

    telerik:RadAjaxLoadingPanel>

  5. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 27 Jun 2008 Link to this post

    Hello Kris,

    This is indeed a strange issue and unfortunately from the provided information I am not able to determine the exact reason for the abnormality you encountered. Can you please check whether the sample project from the first post of the following code library entry:

    http://www.telerik.com/community/code-library/submission/b311D-keegm.aspx

    works as expected on your machine and utilize the same approach to see whether this helps? Alternatively, consider changing the height of the grid at runtime (in accordance with the height of its container) as illustrated in this help article.

    Kind regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Kris
    Kris avatar
    9 posts
    Member since:
    Jun 2008

    Posted 27 Jun 2008 Link to this post

    The example in the code library didn't make any difference.  As I mentioned before, the height properties work as expected for me when the grid is tied to the Ajax Manager (the example in the code library doesn't use the Ajax Manager).

    I did find however, that the help article did provide some relief.  The GridCreated function at the client side appears to work for me without conflicting with any of my other scripts and is called durring an Ajax postback.

    The only thing I'm missing is, the GridCreated function calculates the scroll height by subtracting the grid header height from the container height.  In my case my grid also has a grid footer for the paging controls and I can't figure out how to get the height of that piece of the grid.  Any advice on this one?
  7. Kris
    Kris avatar
    9 posts
    Member since:
    Jun 2008

    Posted 27 Jun 2008 Link to this post

    Another issue I've found today.

    While the grid now fit's 100% on GridCreated at runtime (assuming I hard code the footer height), there are now some client events that are causing the grid to shrink back to nothing.

    Let me start with an overview.  My page is made up of a parent page that contains a few of the asp.net Rad controls (menu, toolbar, multipage, etc...).  Within the parent page there is an IFrame that points to a child page.  This child page contains a user control that in-turn contains the RadGrid control that is having the 100% height issue when the Ajax is turned on.

    The issue that I've found is that when I do a mouseover on any of the responding Rad controls in the parent page (the menu bar for example), the RadGrid in the child page will shrink back down to virtually to nothing.

    Again, I've only been experiencing the issue when I tie the AjaxManager to the RadGrid control.

    Finally, I don't have an AjaxManager on the parent page but there is a ScriptManager.  One theory I have is, could there be a conflict between the two ScriptManagers and/or the AjaxManager in relationship the the parent page and the child page in the IFrame?
  8. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 30 Jun 2008 Link to this post

    Hi Kris,

    This is indeed a strange issue you stumbled upon and unfortunately from the information provided so far I am not able to determine the exact reason for the abnormality.

    Is it possible that you perform some custom calculations when hovering items on the main page which may rollback the height dimension changes you made inside the OnGridCreated handler? I suggest you debug your client code and it this is the case, invoke the OnGridCreated handler explicitly to ensure that the grid height will be applied accordingly.

    If this does not help, I suggest you provide a live url where the discrepancy can be observed or isolate a stripped working version of your project to examine it locally. Thus I will do everything possible to assist you in resolving the issue you are currently facing.

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  9. Mark Ly
    Mark Ly avatar
    2 posts
    Member since:
    May 2006

    Posted 11 Jul 2008 Link to this post

    Hi,

    I'm having the same problem as well ... I've isolated it to an issue with setting Height="100%" on the RadGrid when the grid is 'ajaxified' by being attached to an RadAjaxManager. If RadAjaxManager.EnableAJAX=false, everything is fine.

    regards,
    Mark
  10. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 14 Jul 2008 Link to this post

    Hello Mark,

    Can you replicate the problem by modifying the sample project from the code library thread linked previously? Then merely send the updated version attached to a formal support ticket or specify the differences in order to reproduce the issue on my local machine. Thus I will do everything possible to provide an accurate resolution.

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  11. Ed Bassin
    Ed  Bassin avatar
    33 posts
    Member since:
    Apr 2006

    Posted 17 Jul 2008 Link to this post

    I too am having this problem.  After the upgrade to the 2008 version, adding a RadAjaxManager to the grid makes it's height really small.
  12. Ed Bassin
    Ed  Bassin avatar
    33 posts
    Member since:
    Apr 2006

    Posted 17 Jul 2008 Link to this post

    I created a simple example which demonstrates the problem.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title>Sample Page</title> 
        <style type="text/css"
           html{width: 100%; height: 100%; margin: 0px;}  
           body{width: 100%; height: 100%; margin: 0px;}  
           form{width: 100%; height: 100%; margin: 0px;}  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            </telerik:RadScriptManager> 
            <telerik:RadGrid Width="100%" Height="100%" ID="RadGrid1" runat="server" AllowPaging="False" GridLines="None"
                <MasterTableView> 
                    <RowIndicatorColumn> 
                        <HeaderStyle Width="20px" /> 
                    </RowIndicatorColumn> 
                    <ExpandCollapseColumn> 
                        <HeaderStyle Width="20px" /> 
                    </ExpandCollapseColumn> 
                </MasterTableView> 
                <ClientSettings> 
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
                </ClientSettings> 
            </telerik:RadGrid><telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="RadGrid1"
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
            </telerik:RadAjaxManager> 
        </form> 
    </body> 
    </html> 
     


    using System; 
    using System.Data; 
    using System.Configuration; 
    using System.Collections; 
    using System.Web; 
    using System.Web.Security; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.WebControls.WebParts; 
    using System.Web.UI.HtmlControls; 
     
    public partial class Sample : System.Web.UI.Page 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            DataTable dt = new DataTable(); 
            dt.Columns.Add("ID"); 
            dt.Columns.Add("Random"); 
            dt.Columns.Add("ABC"); 
            dt.Columns.Add("DEF"); 
            dt.Columns.Add("GH"); 
            Random r = new Random(); 
            for (int i = 0; i < 50; i++) { 
                DataRow dr = dt.NewRow(); 
                dr["ID"] = i + ""; 
                dr["Random"] = r.NextDouble() + ""; 
                dt.Rows.Add(dr); 
            } 
            RadGrid1.DataSource = dt
            RadGrid1.DataBind(); 
        } 
     




  13. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 21 Jul 2008 Link to this post

    Hello Ed,

    Indeed I was able to recreate the problem under Gecko-based browsers and it is due to the fact the wrapping elements like divs (injected by the dynamically generated update panels produced by RadAjaxManager) does not have height value set. You can observe the same issue when nesting your grid instance inside standard MS UpdatePanel.

    To bypass the glitch you can set explicitly the height of the update panel in which the grid is embedded with the approach presented in the sample web site attached to this forum post.

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  14. Ian Coetzer
    Ian Coetzer avatar
    65 posts
    Member since:
    Sep 2004

    Posted 01 Oct 2008 Link to this post

    Hi

    Ok, i also had the problem, downloaded the solution and it improved the problem ... now whenever i for example click on my select column links in the grid and it does a successfull ajax postback of the rad grid only their appears a horizontal and vertical scrollbar on the page which makes the grid just off to the left and bottom of the page having to scroll?

    how can i force it to not create those scrollbars after the first ajaxsified postback?

    thanks
  15. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 01 Oct 2008 Link to this post

    Hi Ian,

    I tried to recreate the issue by adding 'select' GridButtonColumn to my previous demo and testing it under IE/FireFox browser but unfortunately to no avail (see the attached project). Merely vertical scroll was displayed for the grid instance on initial load or after selecting an arbitrary record in it.

    Can you please verify that on your machine? Any further details concerning different configuration settings you may have can help us determine the cause of the abnormality to address it asap. Note that I used that latest hotfix 2008.2.826 of RadControls for ASP.NET AJAX in my tests.

    Best regards,
    Stephen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  16. Geoff
    Geoff avatar
    8 posts
    Member since:
    Jan 2015

    Posted 04 Jun 2015 in reply to Sebastian Link to this post

    I have a splitter with two grids, selecting a row in grid one displays results in grid two. Grid one is filtered based on one of three radio buttons. Initially I had the problem listed above where after connecting grid one and the radio buttons to a rad ajax manager the grid appeared squashed. I used the solution above and the grid appeared full height again....great or so I thought.

    When I added grid two to the ajax manager, grid one reverted to being squashed although grid two appeared normally!

    Is there some way to implement this solution for multiple grids in different panes of a splitter?

    Cheers

    Geoff

     

  17. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 08 Jun 2015 Link to this post

    Hi Geoff,

    A possible solution for the problem is provided in this code library. Please examine its implementation, give it a try and let us know if additional questions arise.

    Regards,
    Angel Petrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  18. Geoff
    Geoff avatar
    8 posts
    Member since:
    Jan 2015

    Posted 09 Jun 2015 in reply to Angel Petrov Link to this post

    That worked a treat thank you so much.

    Geoff

     

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