Friday, October 11, 2013

Expanding jQuery datatable not working in IE 10

In previous post, we put master data in jQuery datatable and when user expands a row in master data we show detail data under the row. So when expanded, the inner detail rows are inserted as shown below. Please note that this actually increased the height of datatable section.



In most of browsers (including IE 9) this works fine, but in IE 10.0 I ran into the case that the detail expansion actually did not expand the datatable. It only added vertical scroll bar to datatable and the UI looked ugly as below.



So how to solve this problem?
If end user clicks IE 10.0 compatibility mode icon (red circle in the picture above), it will resolve the issue.
But since developer better not to force end user to do that, the following meta tag section can be added to resolve the issue. That is, add X-UA-Compatible meta tag at the first position of head section.

<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />  
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>