How to adjust DevExpress ASP.NET controls when opening a page in the Internet Explorer Compatibility Mode

Description:
How to adjust DevExpress ASP.NET controls when opening a page in the Internet Explorer Compatibility Mode

Answer:
IMPORTANT NOTE:
Switching Browser/Document settings via the Dev Toolbar is NOT supported. These settings can be set by an end-user/developer and used for testing purposes only. The Browser/Document settings cannot be set natively via the solutions described below.

VERSION HISTORY:

Starting with version 16.1, our ASP.NET products no longer support IE8. See the IE8 support ending in upcoming v16.1 release blog post for more information.
As a result, some related browser's features are not available and our controls do not produce specific HTML rendering in IE8 (IE8 Document Mode).
In order to use version 16.1, it is necessary to use newer IE versions (9+) and adjust the renaming application's parts accordingly.

Starting with version 15.1, our ASP.NET products no longer support IE7. See the IE7 no longer supported in v15.1 and above blog post for more information.
As a result, some related browser's features are not available and our controls do not produce specific HTML rendering in IE7 (IE7 Document Mode).
In order to use version 15.1, it is necessary to use newer IE versions (8+) and adjust the renaming application's parts accordingly.

1. Set the specified IE standards/compatibility version:

1.1. Switching to the specific (for example, "9") Document Mode / Compatibility Version (via the meta tag):
If you need to view a page in the IE Compatibility View when:

- This option is defined via the domain/administrative policy, which forces Compatibility View for certain sites;
- You have a legacy web application, which is displayed properly under the previous/older IE versions:

Starting with version v2014 vol 2 (14.2), it is much easier to specify the target IE Compatibility Version with the help of a new ieCompatibilityVersion configuration option:

XML
<configuration>  
    <devExpress>  
        <settings ieCompatibilityVersion="9" />  
    </devExpress>  
</configuration>  

Prior to version v2014 vol 2 (14.2), use the following approach:

Use the ASPxWebControl.SetIECompatibilityMode method to switch all DevExpress ASP.NET controls on the specified page to use the specified IE version (i.e. inform them on the server side to prepare corresponding HTML rendering).
- ASPxWebControl.SetIECompatibilityMode(int IEVersion)
Using this SetIECompatibilityMode method overload, you have to manually provide the required meta element including an X-UA-Compatible header within the page's head tag:

ASP.NET WebForms:

ASPx
<meta http-equiv="X-UA-Compatible" content="IE=9" />  

C#
protected void Page_PreInit(object sender, EventArgs e) {  
    DevExpress.Web.ASPxWebControl.SetIECompatibilityMode(9);  
}  

Visual Basic
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs)  
    DevExpress.Web.ASPxWebControl.SetIECompatibilityMode(9)  
End Sub  

ASP.NET MVC:

ASPx
<meta http-equiv="X-UA-Compatible" content="IE=8" />  

Global.asax:

C#
protected void Application_AcquireRequestState(object sender, EventArgs e) {  
    DevExpress.Web.ASPxWebControl.SetIECompatibilityMode(9);  
}  

Visual Basic
Protected Sub Application_AcquireRequestState(ByVal sender As Object, ByVal e As EventArgs)  
    DevExpress.Web.ASPxWebControl.SetIECompatibilityMode(9)  
End Sub  

- ASPxWebControl.SetIECompatibilityMode(int IEVersion, Control pageOrMasterPage)
This SetIECompatibilityMode method overload automatically adds the required meta element including an X-UA-Compatible header into the specified page's head tag:

ASP.NET WebForms:

C#
protected void Page_PreInit(object sender, EventArgs e) {  
    DevExpress.Web.ASPxWebControl.SetIECompatibilityMode(9, this.Master);  
}  

Visual Basic
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs)  
    DevExpress.Web.ASPxWebControl.SetIECompatibilityMode(9, Me.Master)  
End Sub  

ASP.NET MVC:

This overload is not available for ASP.NET MVC environment, because there is no such Page object like in ASP.NET WebForms. It is necessary to use the overload with the "IEVersion" parameter and insert the required meta element including an X-UA-Compatible header manually.
The following
E4366 - How to adjust DevExpress ASP.NET controls when opening a page in the Internet Explorer Compatibility Mode
E4370 - How to adjust DevExpress ASP.NET MVC extensions when opening a page in the Internet Explorer Compatibility Mode
Code Central examples illustrate these solutions in action.
The ASPxWebControl.SetIECompatibilityMode method does NOT allow setting the IE version/mode for our controls higher (IE=edge) than the one specified in the User-Agent parameter.

1.2. Switching to the specific (for example, "8") Document Mode / Compatibility Version (via the custom HttpReponse header):

When it is necessary to force the IE browser to work with the specified version (for example, "8") and it is impossible to access the target page source (or the target MasterPage can be different), define the custom X-UA-Compatible response header in the Web.config file in addition to the use of the DevExpress.Web.ASPxClasses.ASPxWebControl.SetIECompatibilityMode method:

XML
<configuration>  
    ...  
    <system.webServer>  
        <httpProtocol>  
            <customHeaders>  
                <clear />  
                <add name="X-UA-Compatible" value="IE=9" />  
            </customHeaders>  
        </httpProtocol>  
    </system.webServer>  
</configuration>  

This approach may not work on the ASP.NET Development Server, because it cannot recognize this Web.config key.
For higher Internet Explorer versions (IE9+), it is recommended to use the below approach.

2. Set the latest available IE standards/compatibility version:
This option is available for versions 12.2+.
If you need to view a page with the latest available IE standards when:
- You are using certain features available only in the latest IE browser versions (such as the HTML5, CSS3, IE10 touch capabilities, etc.);
- You have a web application that is displayed properly only under the latest IE versions

Starting with version v2014 vol 2 (14.2), it is much easier to specify the maximum available IE Compatibility Version with the help of the new ieCompatibilityVersion configuration option:

XML
<configuration>  
    <devExpress>  
        <settings ieCompatibilityVersion="edge" />  
    </devExpress>  
</configuration>  

Prior to version v2014 vol 2 (14.2), use the following approach:

Use the ASPxWebControl.SetIECompatibilityModeEdge method to force all DevExpress ASP.NET controls on the specified page to use the latest available IE version (i.e. inform them on the server side to prepare corresponding HTML rendering).
- ASPxWebControl.SetIECompatibilityModeEdge()
With this SetIECompatibilityModeEdge method overload, you need to manually provide the required Edge meta header element within the page's head tag. Otherwise the client IE version will differ from the server one.

ASP.NET WebForms:

ASPx
<meta http-equiv="X-UA-Compatible" content="IE=edge" />  

C#
protected void Page_PreInit(object sender, EventArgs e) {  
    DevExpress.Web.ASPxWebControl.SetIECompatibilityModeEdge();  
}  

Visual Basic
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs)  
    DevExpress.Web.ASPxWebControl.SetIECompatibilityModeEdge()  
End Sub  

ASP.NET MVC:

ASPx
<meta http-equiv="X-UA-Compatible" content="IE=edge" />  

Global.asax:

C#
protected void Application_AcquireRequestState(Object sender, EventArgs e) {  
    DevExpress.Web.ASPxWebControl.SetIECompatibilityModeEdge();  
}  

Visual Basic
Protected Sub Application_AcquireRequestState(ByVal sender As Object, ByVal e As EventArgs)  
    DevExpress.Web.ASPxWebControl.SetIECompatibilityModeEdge()  
End Sub  

- ASPxWebControl.SetIECompatibilityModeEdge(Control pageOrMasterPage)
This SetIECompatibilityModeEdge method overload automatically adds the Edge meta header element into the specified page's head tag.

ASP.NET WebForms:

C#
protected void Page_PreInit(object sender, EventArgs e) {  
    DevExpress.Web.ASPxWebControl.SetIECompatibilityModeEdge(this.Master);  
}  

Visual Basic
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs)  
    DevExpress.Web.ASPxWebControl.SetIECompatibilityModeEdge(Me.Master)  
End Sub  

ASP.NET MVC:

This overload is not available for ASP.NET MVC environment, because there is no such Page object like in ASP.NET WebForms. It is necessary to use the overload without the "pageOrMasterPage" parameter and insert the required Edge meta header element within the view's head manually.
The following
E4387 - How to use the ASPxWebControl SetIECompatibilityModeEdge method
E4388 - How to use the ASPxWebControl SetIECompatibilityModeEdge method in MVC applications
Code Central examples illustrate these solutions in action.

3. Classic Pipeline Mode (explicit setting of the X-UA-Compatible trigger on the client side):
Most of our existing utility (and ASPxHttpHandlerModule) functionality operates the HttpContext.Current object, which is expected to be correctly initialized (which may not occur when operating in Classic Pipeline Mode). At the same time, different IIS versions may behave very specifically when accessing/operating the Headers collection (for example, see the HttpResponse.Headers MSDN article). It is necessary to use the ieCompatibilityVersion configuration option or ASPxWebControl.SetIECompatibilityMode*** methods (usually for the "edge" mode/version) to produce HTML rendering for the correct/specified IE version on the server side and the "X-UA-Compatible" meta/header trigger to force the same IE document mode version on the client side (regardless of whether the Compatibility Mode is enabled or not) using any of the following ways:
- By adding the response header declaratively in Web.config (if a web server allows this):

Web.config:

XML
<configuration>  
    ...  
    <system.webServer>  
        <httpProtocol>  
            <customHeaders>  
                <clear />  
                <add name="X-UA-Compatible" value="IE=edge" />  
            </customHeaders>  
        </httpProtocol>  
    </system.webServer>  
</configuration>  

- By adding the meta tag instead of the aforementioned response header to the main page (or the master page) header:

ASPx
<meta http-equiv="X-UA-Compatible" content="IE=edge" />  

- By rendering the response header programmatically in the Global.asax file in the HttpApplication.PreSendRequestHeaders event handler and accessing the HttpResponse object using the (sender as HttpApplication).Response / Context.Response properties:

Global.asax:

C#
protected void Application_PreSendRequestHeaders(object sender, EventArgs e) {  
    (sender as System.Web.HttpApplication).Context.Response.AddHeader("X-UA-Compatible", "IE=edge");  
}  

Visual Basic
Protected Sub Application_PreSendRequestHeaders(ByVal sender As Object, ByVal e As EventArgs)  
    TryCast(sender, System.Web.HttpApplication).Context.Response.AddHeader("X-UA-Compatible", "IE=edge")  
End Sub