Probelm radgrid with IE in Compatible Mode

[Carlos]

Hi all,

im having a very big problem, when i have my IE browsers in compatible mode the grids all, crush in height.
What it can be, nedd urgent help.

Best regards.

[Viktor Tachev]

Hello Carlos,

RadControls should work in compatible and normal modes for IE. Would you elaborate more on what you mean by "crush in height"? I would appreciate it if you could share your full source code with the code behind so me and anyone who would like to help could try to replicate the issue locally?

If you are using Visual Studio 2013 I would advise you to upgrade RadControls to Q3 2013 SP1 version (2013.3.1114) as there was an issue with the IDE and previous versions of the controls.

Regards,
Viktor Tachev
Telerik

[Carlos]

ok code i cant put now,

Basically i have in normal mode a ragrid with full ocupation of the div.
When i activate compatible mode os IE10 the radgrid Mastertable loses the height.

Best Regard

[Viktor Tachev]

Hello Carlos,

Thank you for writing back.

In order for RadGrid to occupy 100% of the height of its container. The wrapper must have its height set explicitly. If the grid should occupy the whole height of the page every wrapper element should have its height set to 100%. Take a look at the sample code below:

Css:

html,
body,
form,
#gridContainer {
    margin: 0;
    height: 100%;
}

Markup:

<div id="gridContainer">
    <telerik:RadGrid runat="server" ID="RadGrid1" Height="100%" OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView>
            <Columns>
                <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Description" HeaderText="Description" UniqueName="Description" ReadOnly="false">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
</div>

I hope this would be helpful to you.

Regards,
Viktor Tachev
Telerik

[Carlos]

Hi, and Thanks.

The problem is that i have that, it works fine, but when i am in a browser like IE10 in compatible mode the table do no sets to 100%.

Best Regards

[Viktor Tachev]

Hi Carlos,

I tried replicating the issue you describe, however I was unable to. I am attaching a sample project which is working as expected on my side - the height of RadGrid is 100% in all IE versions. Give it a try and check if it is working for you.

Would you tell me what needs to be changed in the project in order for the problematic behavior to be observed?

Regards,
Viktor Tachev
Telerik

[Carlos]

It happen to me your code do the same in Internet Explorer 10 with compatiblility mode on, the grid loses height.

Best Regards

[Viktor Tachev]

Hi Carlos,

I made a short video illustrating that the sample is working as expected on my end. You could see the video here.

Could you make a video illustrating how to replicate the problematic behavior?

Regards,
Viktor Tachev
Telerik

[Shawn]

In the video, I notice that the columns are slightly misaligned.  This becomes a huge problem when a grid contains more than just a few columns like in your demo.  The RadGrid is not working very well at all in IE Compatibility View.

[Viktor Tachev]

Hello Shawn,

Indeed there is a slight misalignment observed in the video, however this issue has already been resolved and is not present in the current release.

In the latest version of the controls (currently 2013.3.1114) the headers and content for the columns are aligned properly in all supported browser versions. If you are observing such misalignment in your application I would recommend upgrading the controls to the new version available for download from our site.

Regards,
Viktor Tachev
Telerik

[Sam Phen]

Hi Viktor,
I am using 2014.1.403.35 but still I see issues while rendering the Telerik grid in IE COMPATIBILITY ISSUE.

Please suggest.

Thanks,
Shouvik

[Sam Phen]

I am also adding 2 screenshots to provide more clarity into the issue.
RadGrid_Before_Compat_View.png - This image shows how the column width auto adjusts as per the number of columns.
RadGrid_After_Compat_View.png - On COMPATIBILITY VIEW mode, grid gets misaligned and the scrollbar valishes.

[Viktor Tachev]

Hi Sam,

Try to set the HeaderStyle-Width property for all columns in RadGrid except one. Also set the Width of the MasterTableView to 100%.

In case the issue persists please share your full markup with the relevant code-behind. This will enable us and anyone else willing to look into the issue investigate the problem and suggest a solution.


Regards,
Viktor Tachev
Telerik

 

 

[Sam Phen]

Hi Viktor,
What I observed while debugging is, when I set IE 11 in compatibility mode, the code detects the browser type as IE 7.
Will all the features of Radgrid work in IE 7?

Thanks,
Shouvik

[Viktor Tachev]

Hello Shouvik,

The behavior you are seeing is expected. When Compatibility Mode for IE is enabled the browser uses IE 7 rendering mode.

RadGrid supports IE 7 so you could use the control also when the browser is in compatibility mode. If you would like more detailed information on the browser that are supported by UI for ASP.NET AJAX controls it is available here.

Regards,
Viktor Tachev
Telerik