Dynamic resize of kendo grid column not proper in IE10 - kendo-ui

Question

I am trying to resize the kendo grid column using a popup. It works well in all browsers except IE10. The header columns won't resize along with content columns in the grid.
I have created a sample. The difference can be seen when we run it on IE 10 and chrome
http://jsfiddle.net/pavancbz1/6LFYM/4/
The sample has a grid with 3 columns. The column indexes can be 0,1,2 in the pop up to resize the respective column.
$(document).ready(function() {
var window = $("#window"),
undo = $("#undo")
.bind("click", function() {
window.data("kendoWindow").open();
undo.hide();
});
var onClose = function() {
undo.show();
}
if (!window.data("kendoWindow")) {
window.kendoWindow({
width: "280",
title: "Pop up",
actions: [
"Minimize",
"Maximize",
"Close"
],
close: onClose
});
}
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "http://demos.kendoui.com/service/Products",
dataType: "jsonp"
}
},
pageSize: 5,
},
selectable: "multiple row",
pageable: {
buttonCount: 5
},
scrollable: true,
groupable: false,
resizable: true,
columns: [
{
field: "ProductName",
width: 'auto',
title: "Product Name"
},
{
field: "UnitPrice",
width: 'auto',
title: "Unit Price",
format: "{0:c}"
},
{
field: "UnitsInStock",
width: 'auto',
title: "Units In Stock"
}
]
});
var IncreaseWidth = function (e) {
if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
var grid = $("#grid"),
Index = $("#index").val(),
tablewidth = grid.find('table').width();
grid.find('table').width(tablewidth+20);
columnwidth = grid.find('colgroup:first').find('col:eq(' + Index + ')').width();
grid.find('colgroup').find('col:eq(' + Index + ')').width(columnwidth+20);
}
},
DecreaseWidth = function (e) {
if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
var grid = $("#grid"),
Index = $("#index").val(),
tablewidth = grid.find('table').width();
grid.find('table').width(tablewidth-20);
columnwidth = grid.find('colgroup:first').find('col:eq(' + Index + ')').width();
grid.find('colgroup').find('col:eq(' + Index + ')').width(columnwidth-20);
}
};
$(".Increase").click(IncreaseWidth);
$(".Decrease").click(DecreaseWidth);
});
Any solutions to this problem ?

Answer 1

For anyone having similar issue, here's quick work around I used to deal with column resize problem.
Key observation on this problem is that grid column will realign properly once user adjusts the column manually.
So, in my workaround, I basically hide and show first column and force grid columns to re-size and automatically realign columns properly. Column must re-size after grid receive all its data though. I used amplify for custom messaging, but that implementation detail is not crucial as long as code can automatically force column re-size on grid after data is received.
For example,
var dataSource = new kendo.data.DataSource({
type: 'json',
transport: {
read: config.AppBasePath + '/Home/GetSomething',
parameterMap: function (data, type) {
if (type == 'read') {
return {
id: messageId
};
}
}
},
pageSize: 10,
requestEnd: function (e) {
amplify.publish(config.Messages.ShowWindowComplete);
}
}),
....
amplify.subscribe(config.Messages.ShowWindowComplete, function () {
messageHistoryKendoGridElem.data('kendoGrid').hideColumn(1);
messageHistoryKendoGridElem.data('kendoGrid').showColumn(1);
});
Hope this help anyone who is facing similar issue.