3

我正在尝试使用弹出窗口调整剑道网格列的大小。它适用于除 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);


    });

这个问题的任何解决方案？

4

1 回答 1

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

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

于 2013-10-29T18:05:45.403 回答