Grid Scrolling not working in Firefox

[Het]

I am using RadGrid, and I have set all the relevant properties in order to enable scrolling, still it is rendering properly in IE 7 and grid comes in compressed form, where in I can barely see the half header. Interesting thing is, initially grid is visible to its full, but after sometime its height is reduced.

Below is the code.

<

telerik:RadGrid ID="gd" runat="server" AllowPaging="false" AllowSorting="True" GridLines="None"

Skin="Office2007" AutoGenerateColumns="False" OnItemDataBound="gd_ItemDataBound"

Height="99%" Width="99%" AllowMultiRowSelection="true" ShowGroupPanel="true"

EnableViewState="true" AlternatingItemStyle-BackColor="#eeeeee" HorizontalAlign="NotSet">

<

MasterTableView GroupLoadMode="Client" GroupsDefaultExpanded="true" TableLayout="Auto">

<

GroupByExpressions>

<telerik:GridGroupByExpression>

<SelectFields>

<telerik:GridGroupByField FieldName="Desc" HeaderText=" " HeaderValueSeparator=" " />

</SelectFields>

<GroupByFields>

<telerik:GridGroupByField FieldName="Id" SortOrder="Descending" />

</GroupByFields>

</telerik:GridGroupByExpression>

</GroupByExpressions>

<

RowIndicatorColumn Visible="False">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

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

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn HeaderText="Column#" ItemStyle-Width="15%" HeaderStyle-Width="15%"

ItemStyle-VerticalAlign="Top" ShowSortIcon="true" SortAscImageUrl="../MyAircraft/Images/SortAsc.gif"

SortDescImageUrl="../MyAircraft/Images/SortDesc.gif" SortExpression="ColNbr">

<ItemTemplate>

<asp:Label ID="lblColNbr" runat="server"></asp:Label>

</

ItemTemplate>

<ItemStyle VerticalAlign="Top" Width="10%"/>

</telerik:GridTemplateColumn>

</

Columns>

<

EditFormSettings>

<PopUpSettings ScrollBars="None" />

</EditFormSettings>

</MasterTableView>

<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" VerticalAlign="Top" Wrap="True" Height="100%" Width="100%" />

<ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" AllowKeyboardNavigation="true">

<Selecting AllowRowSelect="True" EnableDragToSelectRows="true" />

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

<Resizing AllowColumnResize="True" ResizeGridOnColumnResize="True" EnableRealTimeResize="True"

ClipCellContentOnResize="true"></Resizing>

</ClientSettings>

</telerik:RadGrid>

I am populating the grid at runtime, and values of the lblColnbr is set in gd_ItemDataBound.

There are few more columns with label and text box, as it will increase the size of the text, i am not including those.

Please let me know if I have missed anything here.

Thanks,
Het

[Dimo]

Hello Het,

According to the way CSS and browsers work, when a web element (RadGrid in your case) has its height defined in percent, its parent element should have a height defined as well. If the height of the parent element is also in percent, the rule applies recursively.

Let us know if you need more information.

All the best,
Dimo
the Telerik team

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

[Het]

Thanks Dimo for the reply.

Yes, I guessed the same. In my case I have my RadGrid as below.

<

telerik:RadSplitter ID="StatusSplitter" runat="server" Skin="Default" Width="100%" ResizeWithParentPane="true" Height="100%" Orientation="Horizontal" VisibleDuringInit="false" ResizeWithBrowserWindow="true">
<telerik:RadPane ID="RadPane1" runat="server" Height="100%" Scrolling="None">
<telerik:RadGrid ID="gd" runat="server" AllowPaging="false" AllowSorting="True" GridLines="None" Skin="Telerik" AutoGenerateColumns="False".....

and so on.... RadSplitter is inside form tag.

But still its not showing up completely as desired.

Thanks,
Het

[Dimo]

Hi Het,

Here is a working example of your scenario:

RadGrid with 100% Height

You may also want to check this out:

How to Set 100% Height to RadAjaxManager Update Panel


Both examples contain a RadSplitter with a RadGrid inside.


Best wishes,
Dimo
the Telerik team

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

[Vargis]

So horrible ...Y team Telerick you are taking with Height it all about Scroll ..right
I am also facing with the same ...Ragrid Height is in 100%

In all execpt one RadGrid Scroll Horz and Vertical is working.
Only difference i had found  in that Radgris is

<ClientSettings>
<Scrolling AllowScroll="true" />
</ClientSettings>

is added. Wats a mad ?!