Question

我正在尝试使用弹出窗口调整kendo网格列的大小。它适用于IE10以外的所有浏览器。标题列不会随网格中的内容列一起调整大小。

我创建了一个样本。当我们在IE 10和chrome

上运行它时，可以看到差异

样本有一个包含3列的网格。弹出的列索引可以是0,1,2以调整相应列的大小。 $（document）.ready（function（）{ var window = $（“＃window”）， undo = $（“＃undo”） .bind（“click”，function（）{ window.data（ “kendoWindow”）打开（）; 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);
    });

希望这有助于任何面临类似问题的人。

在IE10中动态调整kendo网格列的大小

1 个答案: