Kendo Grid：调整（缩小）任何列时最后的空白区域

Question

我有一个网格，当我调整（缩小）任何列的大小时，网格末尾会出现一个空白。我已经检查了 Kendo 官方示例，似乎在某些示例中显示的行为在他们的示例中。

我尝试为标题、单元格内容等设置宽度。但它仍然显示一些 UI 问题，并且我有多个网格，我需要一个通用修复。

如果它不是问题和行为，那么请有人看看这个并解释如何解决它。

我添加了一个普通的屏幕截图和调整大小的屏幕截图。

正常

调整大小后

为了测试它，我添加了一个 jsfiddle。

http://jsfiddle.net/49bhz2sk/

html

<div class="panel panel-body">
    <div id="fleetInfoGridDisplayDummy" class="" data-bind="autoHeightContainer:true"></div>
</div>

脚本

 $("#fleetInfoGridDisplayDummy").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 20
                },
                navigatable: true,
                selectable: true,
                sortable: true,
                reorderable: true,
                resizable: true,
                scrollable: { virtual: true },
                columnMenu: true, // Needed to hide and show columns.
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    template: "<div class='customer-photo'" +
                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                    "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });

Answer 1

根据各种剑道来源，这是observed normal behavior (2013) 和unexpected behavior (2017) 的混合体。 Kendo 确实为此问题提供了a workaround，因为我怀疑它不一定与 kendo 相关，而更多的是 HTML/Table 功能。

<style>
    .k-grid {
        width: 700px;
    }
</style>

<div id="grid1"></div>

<script>
    function getMasterColumnsWidth(tbl) {
        var result = 0;
        tbl.children("colgroup").find("col").not(":last").each(function (idx, element) {
            result += parseInt($(element).outerWidth() || 0, 10);
        });

        return result;
    }

    function adjustLastColumn() {
        var grid = $("#grid1").data("kendoGrid");
        var contentDiv = grid.wrapper.children(".k-grid-content");
        var masterHeaderTable = grid.thead.parent();
        var masterBodyTable = contentDiv.children("table");
        var gridDivWidth = contentDiv.width() - kendo.support.scrollbar();

        masterHeaderTable.width("");
        masterBodyTable.width("");

        var headerWidth = getMasterColumnsWidth(masterHeaderTable),
            lastHeaderColElement = grid.thead.parent().find("col").last(),
            lastDataColElement = grid.tbody.parent().children("colgroup").find("col").last(),
            delta = parseInt(gridDivWidth, 10) - parseInt(headerWidth, 10);

        if (delta > 0) {
            delta = Math.abs(delta);
            lastHeaderColElement.width(delta);
            lastDataColElement.width(delta);
        } else {
            lastHeaderColElement.width(0);
            lastDataColElement.width(0);
        }

        contentDiv.scrollLeft(contentDiv.scrollLeft() - 1);
        contentDiv.scrollLeft(contentDiv.scrollLeft() + 1);
    }


    $("#grid1").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
            },
            pageSize: 6,
            serverPaging: true,
            serverSorting: true
        },
        height: 430,
        pageable: true,
        resizable: true,
        columnResize: adjustLastColumn,
        dataBound: adjustLastColumn,
        columns: [{
            field: "FirstName",
            title: "First Name",
            width: "100px"
        }, {
            field: "LastName",
            title: "Last Name",
            width: "150px"
        }, {
            field: "Country",
            width: "100px"
        }, {
            field: "City",
            width: "100px"
        }, {
            field: "Title",
            width: "200px"
        }, {
            template: "&nbsp;"
        }]
    });
</script>

Answer 2

我已经在 Telerik 论坛上发布了这个帖子，并得到了管理员的回复，这是他们建议的解决问题的方法。在这里发布，以便其他人可以从中受益。

“Drew B”提出的答案。也有效，我在另一篇文章中也看到过。我发布的代码用最少的编码不那么繁琐。

columnResize: function (e) {

                    // what is thead and tbody: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields
                    var grid = e.sender,
                        gridHeaderTable = grid.thead.parent(),
                        gridBodyTable = grid.tbody.parent();

                    // what is wrapper: https://docs.telerik.com/kendo-ui/api/javascript/ui/widget/fields/wrapper
                    // what is scrollbar(): https://docs.telerik.com/kendo-ui/api/javascript/kendo/fields/support
                    if (gridBodyTable.width() < grid.wrapper.width() - kendo.support.scrollbar()) {

                      // remove the width style from the last VISIBLE column's col element
                      gridHeaderTable.find("> colgroup > col").last().width("");
                      gridBodyTable.find("> colgroup > col").last().width("");

                      // remove the width property from the last VISIBLE column's object
                      // https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/fields/columns
                      grid.columns[grid.columns.length - 1].width = "";

                      // remove the Grid tables' pixel width
                      gridHeaderTable.width("");
                      gridBodyTable.width("");
                    }

                  },