Radgrid not full height in ie10

[Carlos]

Hi all,

i have put the radgris in a one cell table so it can get full height on the page, but in IE 10 its not doing that.
- I have autogeretadet columns on.

Best Regards

[Venelin]

Hi Carlos,

Since you haven't provided the code related to the issue, I guess that the grid has height in percents.

Generally speaking RadGrid behaves as a normal div element (i.e. block-level html element). From here, setting height in percents to the grid is no different from setting height of a normal div element, but some very important notes should be marked here:

1. Height is not calculated in browsers in the same manner as width is. When you set height 100% to an element you need to make sure that its parent element has an explicit height specified, otherwise the grid simply will not stretch to fulfill its container because the browser don't know what is the height of the parent. Thus some percents of an unknown value will result in undesired behavior (shrinking height).

2. If you have ajaxified the grid the same principles mentioned above hold, because the grid is wrapped by div element which needs to have a specified height too.
If you still experience any difficulties in resolving this issue, you can provide your grid declaration (and ajax settings if any) and the related css code (if any) so I can point you to the solution. Also, please verify if your version of the controls supports IE10.

Regards,
Venelin
Telerik

[Carlos]

HI,

I have the last version of telerik, this problem only happens in ie10, after the site its published to the server,

hers the code, i also have problem wioth the horizontal scroll bar, that do not apear, basicaly i need the horizontal scroll bar

table style="height: 100%" border="0" cellspacing="0" cellpadding="0">
        <tr style="height:100%">
            <td style="height:100%;">
                    <telerik:RadGrid ID="OneGrid" runat="server" Height="100%" AllowPaging="True" AllowSorting="True" AllowFilteringByColumn="True" CellSpacing="0" ShowFooter="True" OnItemCommand="RadGrid1_ItemCommand" OnItemDataBound="RadGrid1_ItemDataBound" EnableHeaderContextMenu="True" AllowAutomaticUpdates="True" GridLines="None" PageSize="20" OnNeedDataSource="RadGrid1_NeedDataSource">
                        <ClientSettings >
                            <Scrolling AllowScroll="True" UseStaticHeaders="True"/>
                        </ClientSettings>
                        <MasterTableView TableLayout="Fixed" CommandItemDisplay="Bottom" Width="100%" EnableSplitHeaderText="false">
                            <CommandItemSettings ShowExportToExcelButton="True" ShowExportToPdfButton="True" ShowAddNewRecordButton="False" ShowExportToCsvButton="True"></CommandItemSettings>

                            <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                                <HeaderStyle></HeaderStyle>
                            </RowIndicatorColumn>

                            <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                                <HeaderStyle></HeaderStyle>
                            </ExpandCollapseColumn>

                            <EditFormSettings>
                                <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
                            </EditFormSettings>

                            <BatchEditingSettings EditType="Cell"></BatchEditingSettings>

                            <PagerStyle PageSizeControlType="RadComboBox" Position="Bottom" AlwaysVisible="True" PageSizes="20;40;80"></PagerStyle>
                        </MasterTableView>
                        <ExportSettings SuppressColumnDataFormatStrings="false" OpenInNewWindow="true">
                            <Pdf PageWidth="">
                                <PageHeader>
                                    <LeftCell Text=""></LeftCell>

                                    <MiddleCell Text=""></MiddleCell>

                                    <RightCell Text=""></RightCell>
                                </PageHeader>

                                <PageFooter>
                                    <LeftCell Text=""></LeftCell>

                                    <MiddleCell Text=""></MiddleCell>

                                    <RightCell Text=""></RightCell>
                                </PageFooter>
                            </Pdf>

                            <Excel Format="Biff"></Excel>
                        </ExportSettings>


                        <FilterMenu EnableImageSprites="False" AppendDataBoundItems="True"></FilterMenu>
                    </telerik:RadGrid>
                </td>
            </tr>
        </table>

Best Regards,

[Venelin]

Hello Carlos,

On my side your code works as expected under IE10 - the grid is 100% of the height of the table. Please check the following:

1. Is the grid ajaxified? If so, you have to set height 100% to the wrapping div.

2. Verify if you are not testing in Compatibility View mode in IE. By default the new IE versions are set to force page in Compatibility Mode for intranet sites. This can be control only with the following settings

 Tolls (alt + t) -> Compatibility View Settings -> "Display intranet sites in Compatibility View"

The option effects only when you are opening a web site in the local network (Intranet sites as pages deployed on IIS), but not in the global network (Internet).  When the IE browser is in the so called Compatibility Mode it behaves similarly to IE7.

3. The default value for the table-layout in html tables is auto. This means that cells will automatically resize in order to fit the content in them (which in this case is the grid). Thus, nothing is limiting the grid from expanding. Even if you have allowed the scroll you will not see it because the grid is expanding in order to accommodate its content (the columns). To prevent this behavior, set table-layout: fixed; to the table that wraps the grid.

Note: in general, it is not recommended to build a page layout using tables, because this approach hits the flexibility, the maintainability and sometimes the performance. Also you don't have to set TableLayout to Fixed since you have enabled the static header. In this mode the TableLayout is Fixed and thus you don't have to set Width 100% to the master table.

Regards,
Venelin
Telerik

[Carlos]

HI again, in the third point most of the things dont happen, im outogenerating my columns, and when i have fixed header's, my field and columns overlap eachother. ÂNd that a problem when i have filters, and have 8 columns overlapsed.

The main pboblem is that.

when i try having Scool bars, fixed header, controls, i cant, it doesnt work, when i cant have something almost the way it has to be
the headers dont move eith the horizontal scroll bar

Its the any solution for this.

Best Regards

[Venelin]

Hi Carlos,

The general rule is that: horizontal scroll bar will appear whenever the scrolling is enabled and the total width of all columns is greater than the width of the grid. If you haven't specified a width for the grid's columns, horizontal scroll will not appear since they will shrink in order to accommodate the available space.

Note: verify that there are no javascript errors listed in your browser's console.

Please find attached a sample project that is illustrating this.

Regards,
Venelin
Telerik

[shyam]

 <div style="width:100%;height:100%">
                <table style="width:100%;height:100%">
                    <tr>
                        <td style="width:50%;height:50%;vertical-align:top;">
                    diagram code
</td>                
                <td style="width:50%;height:50%; vertical-align:top;">
                   <p>The other thing</p> </td></tr></table></div>    height is not updated 

[Venelin]

Hi Shyam,

If the grid is ajaxified then it is wrapped in one <div> element, which should be taken into account too. If this is the case, you can refer to this codelibraty:
http://www.telerik.com/support/code-library/setting-100-height-and-resize-on-container-resize-for-grid-with-scrolling-and-static-headers

Regards,
Venelin
Telerik