This is a migrated thread and some comments may be shown as answers.

RadGrid Height Issue

6 Answers 597 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jimmy Vithalani
Top achievements
Rank 1
Jimmy Vithalani asked on 26 Mar 2010, 06:41 AM
Hello,

I have 2 forms with a RadGrid within RadDock.
Issue is, Height of the RadGrid is not coming proper.

I tried setting Height of RadGrid to 100%.
I tried setting the table's property : style="table-layout:fixed"
Either height is too less to see even headers. Or of rows is too big.
I want height of the grid to be adjusted automatically based on number of records.

Please help me on this.

Thanks.
Jimmy.

Here is my code for dock and grid:


<div>&lt;telerik:RadDockLayout ID="dockLayoutContainerEntityType" runat="server"&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;telerik:RadDockZone ID="dockZoneActionZone" runat="server" Orientation="Vertical" BorderStyle="None"&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;telerik:RadDock ID="dockActions" Skin="Office2007" runat="server" Title="Container-EntityType Mapping" Width="100%" style="margin-bottom:7px"</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;EnableAnimation="false" EnableRoundedCorners="true" &nbsp;Resizable="false" EnableDrag="false" DockMode="Docked"&nbsp;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;DefaultCommands="None" &gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ContentTemplate&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%" style="table-layout:fixed"&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&lt;tr valign="top" align="center" style="height:100%"&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;td valign="top" align="center" style="height:100%"&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;telerik:RadGrid ID="gridTest" runat="server" Skin="Office2007" &nbsp;Width="60%"&nbsp;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;IsConfigDrivenGrid="false" AutoGenerateColumns="false" AllowPaging="true" PagerStyle-AlwaysVisible="true"&nbsp;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;AllowMultiRowSelection="true" AllowFilteringByColumn="false" ShowGroupPanel="false"&nbsp;&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;Selecting AllowRowSelect="true" /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;Scrolling AllowScroll="true" /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ClientSettings&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;MasterTableView Height="90%"&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;Columns&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;telerik:GridTemplateColumn Visible="false"&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ItemTemplate&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;asp:HiddenField ID="hdnMappingId" runat="server" Value='&lt;%#DataBinder.Eval(Container.DataItem, "Id")%&gt;' /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;asp:HiddenField ID="hdnEntityTypeId" runat="server" Value='&lt;%#DataBinder.Eval(Container.DataItem, "EntityTypeId")%&gt;' /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ItemTemplate&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/telerik:GridTemplateColumn&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;telerik:GridClientSelectColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="10%" /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;telerik:GridBoundColumn HeaderText="Entity Type" DataField="Name" UniqueName="Name"&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;HeaderStyle Width="90%" HorizontalAlign="Left" /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ItemStyle Width="90%" HorizontalAlign="Left" /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/telerik:GridBoundColumn&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/Columns&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/MasterTableView&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/telerik:RadGrid&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/td&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/tr&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;tr&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;td height="10px"&gt;&lt;/td&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/tr&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/table&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ContentTemplate&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/telerik:RadDock&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/telerik:RadDockZone&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/telerik:RadDockLayout&gt;</div> 

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 26 Mar 2010, 10:16 AM
Hi Jimmy,

The provided markup is broken and invalid. Can you send it again?

With regard to the RadGrid, if you want its height to be 100%, you must ensure that the page layout conforms to the CSS specification, which requires that an element with percentage height must have a parent with an explicit height. The rule applies recursively if the parent has a percentage height as well.

On the other hand, if you want the RadGrid control to expand vertically, depending on the number of its rows, you either have to turn off the control's scrolling functionality, or use the following CSS rule:

.MyGridClass .rgDataDiv
{
        height : auto !important ;
}

"MyGridClass" is some custom CSS class to the RadGrid control, that you should set to prevent the CSS rule be applied to all RadGrid instances on the page / website.

Regards,
Dimo
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.
0
Jimmy Vithalani
Top achievements
Rank 1
answered on 26 Mar 2010, 11:18 AM
Hi Dimo,

Thanks for Reply.

Here is my code,

<telerik:RadDockLayout ID="dockLayout" runat="server">
                        <telerik:RadDockZone ID="dockZoneActionZone" runat="server" Orientation="Vertical"
                            BorderStyle="None">
                            <telerik:RadDock ID="dockActions" Skin="Office2007" runat="server" 
                                Width="100%" Style="margin-bottom: 7px" EnableAnimation="false" EnableRoundedCorners="true"
                                Resizable="false" EnableDrag="false" DockMode="Docked" DefaultCommands="None">
                                <ContentTemplate>
                                    <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%" style="table-layout: fixed">
                                        <tr valign="top" align="center" style="height: 100%">
                                            <td valign="top" align="center" style="height: 100%">
                                                <telerik:RadGrid ID="grid" runat="server" Skin="Office2007" Width="60%"
                                                    IsConfigDrivenGrid="false" AutoGenerateColumns="false" AllowPaging="true" PagerStyle-AlwaysVisible="true"
                                                    AllowMultiRowSelection="true" AllowFilteringByColumn="false" ShowGroupPanel="false">
                                                        <Selecting AllowRowSelect="true" />
                                                        <Scrolling AllowScroll="true" />
                                                    </ClientSettings>
                                                    <MasterTableView Height="90%">
                                                        <Columns>
                                                            <telerik:GridTemplateColumn Visible="false">
                                                                <ItemTemplate>
                                                                    <asp:HiddenField ID="hdnId" runat="server" Value='<%#DataBinder.Eval(Container.DataItem, "Id")%>' />
                                                                    <asp:HiddenField ID="hdnTypeId" runat="server" Value='<%#DataBinder.Eval(Container.DataItem, "TypeId")%>' />
                                                                </ItemTemplate>
                                                            </telerik:GridTemplateColumn>
                                                            <telerik:GridClientSelectColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="10%" />
                                                            <telerik:GridBoundColumn HeaderText="Type" DataField="TypeName" UniqueName="TypeName">
                                                                <HeaderStyle Width="90%" HorizontalAlign="Left" />
                                                                <ItemStyle Width="90%" HorizontalAlign="Left" />
                                                            </telerik:GridBoundColumn>
                                                        </Columns>
                                                    </MasterTableView>
                                                </telerik:RadGrid>
                                            </td>
                                        </tr>
                                    </table>
                                </ContentTemplate>
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </telerik:RadDockLayout>


I tried giving Grid CssClass="MyGridClass", but it did not work. It shows lot space after footer below grid.

I do not want to give any fix height, the page and grid should adjust its height based on the records within it, I can give fix height for a row in grid though.

Thanks,
Jimmy.
0
Dimo
Telerik team
answered on 29 Mar 2010, 02:00 PM
Hello Jimmy,

In this case, you should not use height for the RadDock, RadGrid and MasterTableView, and add the following CSS to the website:

.RadDock  .rgDataDiv
{
        height: auto !important ;
}


In this way the RadGrid control will be as high as the sum of all its rows, and a horizontal scrollbar will be displayed if needed.


Greetings,
Dimo
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.
0
Jimmy Vithalani
Top achievements
Rank 1
answered on 29 Mar 2010, 03:01 PM
Hello Dimo,

Thanks for the reply.

This worked for one page. But for other tow pages, it displays a horizontal and vertical scroll bar, which I don't want.

Jimmy.
0
Dimo
Telerik team
answered on 30 Mar 2010, 07:40 AM
Hi Jimmy,

The vertical scrollbar is from something else, not RadGrid. Please provide a runnable demo. First, try setting

<telerik:RadGrid  style="border:0;outline:none"  />

Greetings,
Dimo
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.
0
Brad
Top achievements
Rank 1
answered on 15 May 2014, 07:55 PM
turning off scrolling fixed my issue.

​<ClientSettings>
                <Scrolling AllowScroll="False" UseStaticHeaders="True"/>
            </ClientSettings>
Tags
Grid
Asked by
Jimmy Vithalani
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jimmy Vithalani
Top achievements
Rank 1
Brad
Top achievements
Rank 1
Share this question
or