Issue with RadGrid div resizing on header mouseover or scroll in IE9

[ANDREW]

Hi,

I am having an issue with a RadGrid which appears to only occur in IE9. The issue only occurs if I enable AllowScroll in the client settings. When I mouse over the column headers or click on the horizontal scrollbar what I believe is the outer RadGrid div is growing in size leaving a blank space between the grid contents (and horizontal scroll) and the surrounding border. The grid itself has a two level hierarchy and expanding/collapsing any of the items causes the outer div to resize itself back.

Running IE9 in IE7/IE8 or IE9 compatibility mode does not show the problem. It appears to only occur in IE9 itself. 

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="ObjectDataSource1" OnColumnCreated="RadGrid1_ColumnCreated"
    OnItemCreated="RadGrid1_ItemCreated" OnItemDataBound="RadGrid1_ItemDataBound" OnExportCellFormatting="RadGrid1_ExportCellFormatting" Width="100%">
    <MasterTableView HierarchyDefaultExpanded="false" HierarchyLoadMode="Client" AllowSorting="false"
        DataKeyNames="EventGroupTypeId, ParentEventGroupTypeId" TableLayout="Fixed">
        <SelfHierarchySettings ParentKeyName="ParentEventGroupTypeId" KeyName="EventGroupTypeId" />
    </MasterTableView>
    <ClientSettings AllowExpandCollapse="true">
        <Scrolling AllowScroll="true" />
        <ClientEvents OnGridCreated="GridCreated" />
    </ClientSettings>
</telerik:RadGrid>

I also have some css to force the height to auto: 

.rgDataDiv { height: auto !important }

I have found that the problem appears to only occur if I set the Grid width in JS. This is done in the OnGridCreated client event using the following code:

function GridCreated(sender, args) {
    ResizeGrid();
}

function ResizeGrid() {
    var grid = $find("<%= RadGrid1.ClientID %>");

    grid.get_element().style.width = ($(window).width() - 140) + "px";  // <-- with this line included, the problem shows. Without it, the problem doesn't show but the grid also goes off the screen (large number of columns)
}

The 140px offset is simply to allow for a page border. The ResizeGrid function is only ever called the once (through the GridCreated function). 

Is there another way to set the Grid width that would be better suited? This appears to be the recommended way to do this as per Telerik support (http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-width-and-height-in-javascript-dom.aspx)

I have some screen captures showing the issue if that helps? Just let me know how you would like me to get them to you.

Cheers,

Andrew

[ANDREW]

Hi,

I have managed to create a work around by forcing the page to run in IE8 compatibility mode if someone tries to use IE9.. Placing the following in the Page_PreRender should do it..

if (Request.Browser.Browser == "IE" && Request.Browser.MajorVersion == 9)
{
    System.Web.UI.HtmlControls.HtmlMeta metaTag = new System.Web.UI.HtmlControls.HtmlMeta();
    metaTag.HttpEquiv = "X-UA-Compatible";
    metaTag.Content = "IE=EmulateIE8";

    Page.Header.Controls.AddAt(0, metaTag);
}

The reason I have had to use a programatically solution is because I have theming enabled which was inserting the stylesheet link as the first element after the head and as such IE was ignoring the meta tag due to the link tag forcing it to assume std IE9 mode

Cheers,

Andrew

[Josh]

I am having a similar issue in IE9. I have horizontal scroll bars enabled. When I mouse over the grid, the space below the scrollbar but above the pager grows indefinitely.

[Galin]

Hello Josh,

There is a similar known bug in IE9, when the RadGrid is wrapped in container with overflow: auto. It can be reproduced with regular HTML elements as well.

However, you can fix it by setting either display: inline-block on this grid's wrapper or on the data container, e.g.

._Telerik_IE9 .rgDataDiv
{
    display: inline-block;
}

I hope this helps.

All the best,
Galin
the Telerik team

[Josh]

Galin,

That worked perfectly.


Thank you,

[Ketan]

Hi,

Issue related to the growing of dock size on mouse over is fixed by setting 'display: inline-block;' on div containing rad grid, but scrolling stopped working i.e. after applying this fix original issue is fixed but horizontal scroll bar is not appearing.

We are applying below css over div containing rad grid:
RadGridHorizontalScroll
{
    overflow-x: auto;
    overflow-y: hidden;
    width: 99%;
    padding: 8px 0 20px 0;
    width: auto;
    display: inline-block !important;
}

[Ketan]

Hi,

Issue is resolved by removing "width : Auto"  style and setting "Display: Inline-Block".

Thanks,