Kendo Grid: пустое место в конце, когда вы изменяете (уменьшаете) любой столбец

Question

У меня есть сетка, и когда я изменяю размер (уменьшаю) любой столбец, в конце сетки появляется пробел.Я проверил с официальными образцами Kendo, и кажется, что в некоторых образцах показано поведение в их образцах.

Я попытался установить ширину для заголовка, содержимого ячейки и т. Д., Но он по-прежнему показывает некоторые проблемы с пользовательским интерфейсом, и у меня есть несколько сеток, и мне нужно общее исправление.

Если это не проблема иповедение, то кто-то, пожалуйста, посмотрите на это и объясните, как это исправить.

Я добавил обычный снимок экрана и снимок экрана с измененным размером.

нормальный

после изменения размера

Для тестирования я добавил 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

Я разместил это на форуме telerik и получил ответ от администратора, вот как они предложили решить проблему. Размещено здесь, чтобы кто-то другой мог извлечь из этого пользу.

Ответ, предложенный Дрю Б. также работает, я видел это тоже в другом посте. Код, который я разместил, менее громоздкий с минимальным кодированием.

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

                  },

Answer 2

Согласно различным источникам кендо, это смесь наблюдаемого нормального поведения (2013) и неожиданного поведения (2017) .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>