I have a simple grid bound to server data (asp.net mvc). I noticed that in IE8 (or IE9 compatibility view), the grid column headers don't respect the width settings. However, the actual column data does. See attached image (grid not aligned.png).
Here's my razor code -
The only style I have applied is this -
I did notice that -
1) It works correctly in IE9 and Chrome all the time (with our without resizable() configuration).
2) I want my column non-resizable. But if I make them resizable, then initially the columns render mis-aligned (in IE8) as in the image but as soon as I try to resize a column by dragging the column header, they all immediately line up correctly. So, it's just the initial layout that is not respecting the width settings I believe.
I'm using the Kendo mvc library version 2012.3.1315.340 (trial version).
Any idea of what I need to do to make it work in IE8?
Here's my razor code -
<div id =
"griddisplay"
>
@(Html.Kendo().Grid(Model)
.Name(
"MyGrid"
)
.Columns(columns =>
{
columns.Bound(p => p.RegionId).Title(
"Region ID"
).Width(
"100px"
);
columns.Bound(p => p.RegionName).Title(
"Region Name"
).Width(
"150px"
);
})
.Pageable()
.Resizable(r=>r.Columns(
true
))
.Sortable()
.Scrollable(scr => scr.Height(
"200px"
))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action(
"GridTest"
,
"MyController"
)
)
)
)
</div>
#griddisplay {
width
:
520px
;
font-size
:
12px
}
1) It works correctly in IE9 and Chrome all the time (with our without resizable() configuration).
2) I want my column non-resizable. But if I make them resizable, then initially the columns render mis-aligned (in IE8) as in the image but as soon as I try to resize a column by dragging the column header, they all immediately line up correctly. So, it's just the initial layout that is not respecting the width settings I believe.
I'm using the Kendo mvc library version 2012.3.1315.340 (trial version).
Any idea of what I need to do to make it work in IE8?