i trying resize kendo grid column using popup. works in browsers except ie10. header columns won't resize along content columns in grid.
i have created sample. difference can seen when run on ie 10 , chrome
http://jsfiddle.net/pavancbz1/6lfym/4/
the sample has grid 3 columns. column indexes can 0,1,2 in pop resize 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 problem ?
for having similar issue, here's quick work around used deal column resize problem.
key observation on problem grid column realign once user adjusts column manually.
so, in workaround, hide , show first column , force grid columns re-size , automatically realign columns properly. column must re-size after grid receive data though. used amplify custom messaging, implementation detail not crucial long code can automatically force column re-size on grid after data 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 facing similar issue.
Comments
Post a Comment