Grid height problems again

11 posts, 0 answers
  1. Gabriel
    Gabriel avatar
    15 posts
    Member since:
    Jun 2008

    Posted 28 Nov 2008 Link to this post

    I'm struggling to set 100% height on a grid. I've seen many threads open on this subject and a few code samples too but they are all too simple.

    The main issue is that there is a <div> element generated (usually has an id of the form ...._GridData) that has an inline style like this:

    OVERFLOW: auto; WIDTH: 100%; HEIGHT: 10px 

    and thus the content will always be in a 10 pixel high box. Even if I set the Height attribute of the grid to something fixed that div stays 10 pixel high and only the lower pager area grows in height so that the grid will respect the given height.

    The question is why does that div has that hardcoded height? What would be the purpose of having such a default anyway?
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 28 Nov 2008 Link to this post

    Hello Gabriel,

    The height of 10px is recalculated and changed client-side, so it doesn't matter.

    If a RadGrid with scrolling has its Height set to 100%, but the control does not expand, then the parent element of RadGrid does not have an explicit height, which is a requirement, according to the W3C HTML/CSS specification. The rule applies recursively, if the parent element has its height set in percent.

    If the parent element of RadGrid has a height specified in pixels, and RadGrid still does not expand, this means that it is ajaxified and the update panel's <div> element does not have a height set explicitly. If this is the case, please refer to:

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



    Sincerely yours,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Craig
    Craig avatar
    7 posts
    Member since:
    Oct 2008

    Posted 14 Jan 2009 Link to this post

    We have this problem as well, but it happens even if you set an explicit height on the grid, and it happens intermittently.  The grid is inside a multipage and the PageView also has an explicit height set, so it's not being caused by the container not having an explicit height.

    The height is always fine when the page loads, the problem only occurs after an AjaxManager request, but not every time, even when all parameters are the same.  We currently have a workaround that explicitly goes in and clears the inline height=10px after every AjaxManager request.

  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 15 Jan 2009 Link to this post

    Hello Craig,

    You should be able to do without this workaround. Please make sure that all nested RadGrid parents have an explicit height set, until an element with a height in pixels is reached.

    You can use Firebug in order to discover which element is missing its height, when the problem is reproduced.

    Regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Craig
    Craig avatar
    7 posts
    Member since:
    Oct 2008

    Posted 16 Jan 2009 Link to this post

    So is it not sufficient to set an explicit height for the RadGrid itself?

    In any case the grid, the PageView it is contained in and the MultiPage that contains the PageView all have an explicit height set (290px).  Do I need to set an explicit height on the container of the MultiPage as well (a table cell)?


  7. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 19 Jan 2009 Link to this post

    Hello Craig,

    According to the CSS specification, heights set in percentage are calculated with respect to the height of the containing element. This rule applies recursively, if you have a series of nested elements with heights in percent.

    However, if you have set height of 290px to RadGrid, then your case is different. Please provide a runnable sample, which reproduces the problem, so that we can investigate locally.

    Sincerely yours,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Mark
    Mark avatar
    4 posts
    Member since:
    Apr 2008

    Posted 23 Feb 2009 Link to this post

    We're being hit by the same bug. We have a fixed height grid within a tabstrip. Each tab contains a different grid. As you flip through the tabs GridDataDiv_DomainGrid is not always recalculated correctly. It usually ends up at 10px. As the previous posted did we have to inject JavaScript to manually set this element to the correct height.

    I'll include a code snipper below. When you flip from pageview1 to pageview2 the bug hits and the grid shrinks as GridDataDiv_DomainGrid doesn't recalculate correctly.

      <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">  
                <telerik:RadPageView ID="RadPageView1" runat="server" Visible="true">  
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">  
                        <ContentTemplate> 
                            <telerik:RadGrid Width="830px" Height="224px" ID="rGridAddress" runat="server" EnableEmbeddedSkins="false" 
                                Skin="<%#gridSkin %>" AutoGenerateColumns="False" GridLines="None" OnNeedDataSource="rGridAddress_NeedDataSource" 
                                OnUpdateCommand="rGridAddress_UpdateCommand" AutoGenerateDeleteColumn="true" 
                                OnDeleteCommand="rGridAddress_DeleteCommand" OnInsertCommand="rGridAddress_InsertCommand" 
                                OnItemCommand="rGridAddress_ItemCommand" AllowSorting="true" AllowPaging="true" 
                                PageSize="<%#gridPageSize %>">  
                                <PagerStyle NextPageText="Next" PrevPageText="Prev" Mode="NextPrev" AlwaysVisible="true">  
                                </PagerStyle> 
                                <MasterTableView DataKeyNames="Id" EditMode="InPlace" CommandItemDisplay="Top">  
                                    <CommandItemTemplate> 
                                        <div class="GridHeader">  
                                            <img src="http://beta.pacificonline.com/images/icons/add_16px.png" /> 
                                            <asp:LinkButton ID="btnAdd" EnableViewState="false" runat="server" CommandName="InitInsert" 
                                                Enabled='<%# !rGridAddress.MasterTableView.IsItemInserted && rGridZone.MasterTableView.Items.Count != 0 %>' 
                                                Text="Add Record" OnClientClick="cur_edit_grid=FindGrid('Address');" /> 
                                            <img src="http://beta.pacificonline.com/images/icons/delete_16px.png" /> 
                                            <asp:LinkButton ID="btnDelSel" EnableViewState="false" runat="server" CommandName="DeleteSelected" 
                                                Enabled='<%# !rGridAddress.MasterTableView.IsItemInserted && rGridZone.MasterTableView.Items.Count != 0 %>' 
                                                OnClientClick='javascript:return ConfirmDeletion("Address");' Text="Delete Records" /> 
                                        </div> 
                                    </CommandItemTemplate> 
                                    <Columns> 
                                        <%--Data Cols Start--%> 
                                        <%--Data Cols End--%> 
                                        <telerik:GridTemplateColumn> 
                                            <%-- ChkCol Style--%> 
                                            <HeaderStyle Width="33px" /> 
                                            <ItemStyle Width="33px" HorizontalAlign="Center" /> 
                                            <%-- ############ --%> 
                                            <EditItemTemplate> 
                                                &nbsp;  
                                            </EditItemTemplate> 
                                            <ItemTemplate> 
                                                <asp:CheckBox ID="ckClientRowSelect" runat="server" /> 
                                            </ItemTemplate> 
                                        </telerik:GridTemplateColumn> 
                                        <telerik:GridBoundColumn DataField="Id" Display="False" EmptyDataText="&amp;nbsp;" 
                                            HeaderText="Id" UniqueName="IdCol">  
                                        </telerik:GridBoundColumn> 
                                        <telerik:GridTemplateColumn DataField="HostName" SortExpression="HostName" HeaderText="Host Name" 
                                            UniqueName="HostNameCol">  
                                            <EditItemTemplate> 
                                                <asp:TextBox ID="HostNameTextBox" runat="server" Text='<%# Bind("HostName") %>' MaxLength="64"></asp:TextBox> 
                                                <asp:RegularExpressionValidator EnableViewState="false" ID="RegexValidator1" runat="server" 
                                                    Display="None" ErrorMessage="Error: 'Host' value is invalid." ValidationExpression="^(?:\w{1,64}|\*)$" 
                                                    ControlToValidate="HostNameTextBox" /> 
                                            </EditItemTemplate> 
                                            <ItemTemplate> 
                                                <asp:Label ID="HostNameLabel" runat="server" Text='<%# string.IsNullOrEmpty((string)Eval("HostName")) ?  "&nbsp;" : Eval("HostName")%>'></asp:Label> 
                                            </ItemTemplate> 
                                        </telerik:GridTemplateColumn> 
                                        <telerik:GridTemplateColumn DataField="IPAddress" SortExpression="IPAddress" HeaderText="IP Address" 
                                            UniqueName="IPAddressCol">  
                                            <HeaderStyle Width="200px" /> 
                                            <ItemStyle Width="200px" /> 
                                            <EditItemTemplate> 
                                                <asp:TextBox ID="IPAddressTextBox" runat="server" Text='<%# Bind("IPAddress") %>' 
                                                    MaxLength="15"></asp:TextBox> 
                                                <asp:RequiredFieldValidator ID="ReqValidator2" EnableViewState="false" runat="server" 
                                                    ErrorMessage="Error: 'IP' value is required." Display="None" ControlToValidate="IPAddressTextBox"></asp:RequiredFieldValidator> 
                                                <asp:RegularExpressionValidator ID="RegexValidator2" EnableViewState="false" runat="server" 
                                                    ErrorMessage="Error: 'IP' value is invalid." ValidationExpression="^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})$" 
                                                    ControlToValidate="IPAddressTextBox" Display="None"></asp:RegularExpressionValidator> 
                                            </EditItemTemplate> 
                                            <ItemTemplate> 
                                                <asp:Label ID="IPAddressLabel" runat="server" Text='<%# Eval("IPAddress") %>'></asp:Label> 
                                            </ItemTemplate> 
                                        </telerik:GridTemplateColumn> 
                                        <telerik:GridBoundColumn DataField="LastModified" EmptyDataText="&amp;nbsp;" HeaderText="Last Modified Date" 
                                            UniqueName="LastModifiedCol" DataFormatString="{0:G}" DataType="System.DateTime" 
                                            ReadOnly="True">  
                                            <HeaderStyle Width="200px" /> 
                                            <ItemStyle Width="200px" /> 
                                        </telerik:GridBoundColumn> 
                                        <telerik:GridEditCommandColumn> 
                                            <HeaderStyle Width="70px" /> 
                                            <ItemStyle Width="70px" HorizontalAlign="Center" /> 
                                        </telerik:GridEditCommandColumn> 
                                    </Columns> 
                                </MasterTableView> 
                                <ClientSettings> 
                                    <Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling> 
                                </ClientSettings> 
                            </telerik:RadGrid> 
                        </ContentTemplate> 
                    </asp:UpdatePanel> 
                </telerik:RadPageView> 
                <telerik:RadPageView ID="RadPageView2" runat="server" Visible="true">  
                    <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">  
                        <ContentTemplate> 
                            <telerik:RadGrid Width="830px" Height="224px" ID="rGridMailExchange" Enabled="true" 
                                runat="server" EnableEmbeddedSkins="false" Skin="<%#gridSkin %>" AutoGenerateColumns="False" 
                                AutoGenerateDeleteColumn="true" GridLines="None" OnDeleteCommand="rGridMailExchange_DeleteCommand" 
                                OnInsertCommand="rGridMailExchange_InsertCommand" OnItemCommand="rGridMailExchange_ItemCommand" 
                                OnNeedDataSource="rGridMailExchange_NeedDataSource" OnUpdateCommand="rGridMailExchange_UpdateCommand" 
                                AllowSorting="true" AllowPaging="true" PageSize="<%#gridPageSize %>">  
                                <PagerStyle NextPageText="Next" PrevPageText="Prev" Mode="NextPrev" AlwaysVisible="true">  
                                </PagerStyle> 
                                <MasterTableView CommandItemDisplay="Top" DataKeyNames="Id" EditMode="InPlace">  
                                    <CommandItemTemplate> 
                                        <div class="GridHeader">  
                                            <img src="http://beta.pacificonline.com/images/icons/add_16px.png" /> 
                                            <asp:LinkButton ID="btnAdd" EnableViewState="false" runat="server" CommandName="InitInsert" 
                                                Enabled='<%# !rGridMailExchange.MasterTableView.IsItemInserted && rGridZone.MasterTableView.Items.Count != 0 %>' 
                                                Text="Add Record" OnClientClick="cur_edit_grid=FindGrid('MailExchange');" /> 
                                            <img src="http://beta.pacificonline.com/images/icons/delete_16px.png" /> 
                                            <asp:LinkButton ID="btnDelSel" EnableViewState="false" runat="server" CommandName="DeleteSelected" 
                                                Enabled='<%# !rGridMailExchange.MasterTableView.IsItemInserted && rGridZone.MasterTableView.Items.Count != 0 %>' 
                                                OnClientClick='javascript:return ConfirmDeletion("MailExchange");' Text="Delete Records" /> 
                                        </div> 
                                    </CommandItemTemplate> 
                                    <Columns> 
                                        <telerik:GridTemplateColumn> 
                                            <%-- ChkCol Style--%> 
                                            <HeaderStyle Width="33px" /> 
                                            <ItemStyle Width="33px" HorizontalAlign="Center" /> 
                                            <%-- ############ --%> 
                                            <EditItemTemplate> 
                                                &nbsp;  
                                            </EditItemTemplate> 
                                            <ItemTemplate> 
                                                <asp:CheckBox ID="ckClientRowSelect" runat="server" /> 
                                            </ItemTemplate> 
                                        </telerik:GridTemplateColumn> 
                                        <telerik:GridBoundColumn DataField="Id" Display="False" EmptyDataText="&amp;nbsp;" 
                                            HeaderText="Id" UniqueName="IdCol" ReadOnly="true">  
                                        </telerik:GridBoundColumn> 
                                        <%--Data Cols Start--%> 
                                        <telerik:GridTemplateColumn DataField="HostName" SortExpression="HostName" HeaderText="Host Name" 
                                            UniqueName="HostNameCol">  
                                            <EditItemTemplate> 
                                                <asp:TextBox MaxLength="64" ID="HostNameTextBox" runat="server" Text='<%# Bind("HostName") %>'></asp:TextBox> 
                                                <asp:RegularExpressionValidator ID="RegexValidator_HostNameTextBox" EnableViewState="false" 
                                                    runat="server" ErrorMessage="Error: 'Host' value is invalid." ValidationExpression="^(?:\w{1,64}|\*)$" 
                                                    ControlToValidate="HostNameTextBox" Display="None"></asp:RegularExpressionValidator> 
                                            </EditItemTemplate> 
                                            <ItemTemplate> 
                                                <asp:Label ID="HostNameLabel" runat="server" Text='<%# string.IsNullOrEmpty((string)Eval("HostName")) ?  "&nbsp;" : Eval("HostName")%>'></asp:Label> 
                                            </ItemTemplate> 
                                        </telerik:GridTemplateColumn> 
                                        <telerik:GridTemplateColumn DataField="NameExchange" SortExpression="NameExchange" 
                                            HeaderText="MX Server" UniqueName="NameExchangeCol">  
                                            <HeaderStyle Width="200" /> 
                                            <ItemStyle Width="200" /> 
                                            <EditItemTemplate> 
                                                <asp:TextBox MaxLength="253" ID="NameExchangeTextBox" runat="server" Text='<%# Bind("NameExchange") %>'></asp:TextBox> 
                                                <asp:RegularExpressionValidator ID="RegexValidator_NameExchangeTextBox" EnableViewState="false" 
                                                    runat="server" ErrorMessage="Error: 'MX Server' value is invalid." ValidationExpression="^[a-zA-Z0-9]+\-*[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+\-*[a-zA-Z0-9]+)*\.[a-zA-Z0-9]+$" 
                                                    ControlToValidate="NameExchangeTextBox" Display="None"></asp:RegularExpressionValidator> 
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" EnableViewState="false" 
                                                    runat="server" ErrorMessage="Error: 'MX Server' value is required." Display="None" 
                                                    ControlToValidate="NameExchangeTextBox"></asp:RequiredFieldValidator> 
                                            </EditItemTemplate> 
                                            <ItemTemplate> 
                                                <asp:Label ID="NameExchangeLabel" runat="server" Text='<%# Eval("NameExchange")%>'></asp:Label> 
                                            </ItemTemplate> 
                                        </telerik:GridTemplateColumn> 
                                        <telerik:GridTemplateColumn DataField="Preference" SortExpression="Preference" HeaderText="Priority" 
                                            UniqueName="PreferenceCol">  
                                            <HeaderStyle Width="60px" HorizontalAlign="Center" /> 
                                            <ItemStyle Width="60px" HorizontalAlign="Center" /> 
                                            <EditItemTemplate> 
                                                <asp:TextBox MaxLength="4" ID="PreferenceTextBox" runat="server" Text='<%# Bind("Preference") %>' 
                                                    Width="40"></asp:TextBox> 
                                                <asp:RegularExpressionValidator ID="RegexValidator_PreferenceTextBox" EnableViewState="false" 
                                                    runat="server" ErrorMessage="Error: 'Priority' value is invalid." ValidationExpression="^\d{1,4}$" 
                                                    ControlToValidate="PreferenceTextBox" Display="None"></asp:RegularExpressionValidator> 
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator_PreferenceTextBox" EnableViewState="false" 
                                                    runat="server" ErrorMessage="Error: 'Priority' value is required." Display="None" 
                                                    ControlToValidate="PreferenceTextBox"></asp:RequiredFieldValidator> 
                                                <asp:RangeValidator ID="RangeValidator_PreferenceTextBox" runat="server" EnableViewState="false" 
                                                    ErrorMessage="Error: 'Priority' value must be between 0 and 65535." ControlToValidate="PreferenceTextBox" 
                                                    Display="None" MinimumValue="0" MaximumValue="65535"></asp:RangeValidator> 
                                            </EditItemTemplate> 
                                            <ItemTemplate> 
                                                <asp:Label ID="PreferenceLabel" runat="server" Text='<%# Eval("Preference")%>'></asp:Label> 
                                            </ItemTemplate> 
                                        </telerik:GridTemplateColumn> 
                                        <%--Data Cols End--%> 
                                        <telerik:GridBoundColumn DataField="LastModified" EmptyDataText="&amp;nbsp;" HeaderText="Last Modified Date" 
                                            UniqueName="LastModifiedCol" DataType="System.DateTime" ReadOnly="True" DataFormatString="{0:G}">  
                                            <HeaderStyle Width="200px" /> 
                                            <ItemStyle Width="200px" /> 
                                        </telerik:GridBoundColumn> 
                                        <telerik:GridEditCommandColumn> 
                                            <HeaderStyle Width="70px" /> 
                                            <ItemStyle Width="70px" HorizontalAlign="Center" /> 
                                        </telerik:GridEditCommandColumn> 
                                    </Columns> 
                                </MasterTableView> 
                                <ClientSettings> 
                                    <Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling> 
                                </ClientSettings> 
                            </telerik:RadGrid> 
                        </ContentTemplate> 
                    </asp:UpdatePanel> 
  9. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 24 Feb 2009 Link to this post

    Hi Mark,

    In your case the problem is different - RadGrid is not able to resize automatically (required when using static headers) when it is inside an invisible container (the inactive page view), because in this case all widths and heights are zero and no calculations can be made.

    The solution is to subscribe to the tabstrip's OnClientTabSelected event, find the RadGrid inside the page view and call the repaint() method manually:

    <telerik:RadTabStrip ID="RadTabStrip" runat="server" OnClientTabSelected="adjustGrid">

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">

    function adjustGrid()
    {
        var grid = $find("<%= rGridAddress.ClientID %>");
        if (grid)
        {
             grid.repaint();
        }
    }

    </script>
    </telerik:RadCodeBlock>


    Regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  10. Mark
    Mark avatar
    4 posts
    Member since:
    Apr 2008

    Posted 24 Feb 2009 Link to this post

    Perfect! Problem solved. Thanks a lot!
  11. Simon Damberger
    Simon Damberger avatar
    6 posts
    Member since:
    Nov 2008

    Posted 16 Apr 2009 Link to this post

    This also fixed a problem I was having with a couple of RadGrid controls embedded in a RadTab control. Thanks!
  12. mfazzio
    mfazzio avatar
    2 posts
    Member since:
    Jul 2009

    Posted 18 Aug 2010 Link to this post

    Hi. I had the same problem as Craig. When I put height = "100%" to the grid, my GridData section had a height="10px"
    I discovered that my grid was within an updatePanel autogenerated (RadGrid1Panel) , that happened because I was using Ajax.  And to resolve the problem I had to change its height  to "100%"
    I found this post that explained better: http://www.telerik.com/community/forums/aspnet-ajax/grid/problems-using-radgrid-inside-radsplitter.aspx
    "Since RadGrid is ajaxified, it is wrapped inside an update panel, which is a <div> element with no styles... In order to fix this vertical expansion problem when RadGrid is ajaxified, you need to add a height style to the update panel. Unfortunately update panels do not offer any means to control their height. You can set a height with CSS, however, you will need the client ID of the update panel. Here is an example, which demonstrates how to obtain the client ID of an update panel and set a 100% height style with CSS:
    http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx"

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