剑道网格列的动态调整大小在IE10中不正确

Question

我正在尝试使用弹出窗口调整剑道网格列的大小。它在除IE10之外的所有浏览器中均能正常运行。标题列不会与网格中的内容列一起调整大小。

我创建了一个样本。当我们在IE 10和chrome上运行它时，可以看到区别

http://jsfiddle.net/pavancbz1/6LFYM/4/

该示例具有3列的网格。弹出窗口中的列索引可以为0,1,2，以调整相应列的大小。

   $(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);


    });

是否有解决此问题的方法？

我正在尝试使用弹出窗口调整剑道网格列的大小。它在除IE10之外的所有浏览器中均能正常运行。标题列不会随着网格中的内容列一起调整大小。我创建了一个样本。 ...

Answer 1

对于有类似问题的任何人，这里都是我用来处理列大小调整问题的快速解决方法。