kendo-ui - 剑道网格列的动态调整大小在 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);


    });

这个问题有解决办法吗？

Answer 1

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

此问题的关键观察是，一旦用户手动调整列，网格列将正确重新对齐。

因此，在我的解决方法中，我基本上隐藏和显示第一列，并强制网格列重新调整大小并自动正确重新对齐列。不过，在网格收到所有数据后，必须重新调整列的大小。我使用 amplify 进行自定义消息传递，但只要代码可以在收到数据后自动强制网格上的列重新调整大小，实现细节并不重要。

例如，

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);
    });

希望这可以帮助任何面临类似问题的人。