Question

我将第一列设置为固定宽度＆＃39; 31px＆＃39;，但是当所有列都变小并通过调整容器大小调整网格大小时，第一列会增加。在feddle示例中，如果您将标题和年龄列的大小设置为Screen shot中的小，然后调整大小，您将看到第一列宽度增加。

var ds = new kendo.data.DataSource({
data: createRandomData(50),
schema: {
    model: {
        fields: {
            FirstName: { type: "string" },
            LastName: { type: "string" },
            City: { type: "string" },
            Title: { type: "string" },
            Age: { type: "number" }
        }
    }
},
pageSize: 10
});

$(document).ready(function() {
$("#grid").kendoGrid({
    dataSource: ds,
    height: 450,
    sortable: true,
    reorderable: true,
    resizable: true,
    pageable: true,
    columnResize : saveWidthOfColumns,
    rowTemplate: kendo.template($("#template").html()),
    columns: JSON.parse('[{"title":"FirstName","width":"31px"},{"title":"Title","width":null},{"title":"Age","width":null}]')
});
});
function saveWidthOfColumns(event) {
if (event.column.field == null) {
    $("#grid colgroup").each(function() {
        $(this).find(":nth-child(1)").css("width", "31px");
    });
}
} 
$(window).resize(function() {
resizeGrid();
});
function resizeGrid() {
var newWidth = $('body').innerWidth() - 20;
var oldWidth = $(".k-grid-content table").width() - 20;
if(oldWidth < newWidth)
{
    $(".k-grid-content").css("padding-right", "18px");
    $(".k-grid-content table").css("width",newWidth + "px");
    $(".k-grid-header-wrap table").css("width",newWidth + "px");
}

}

Fiddle example

Answer 1

我不确定我是否完全理解您的要求，但请尝试从容器div中删除宽度样式，并且网格将适当填充和调整大小。

在调整网格大小时，Kendo UI固定宽度列大小会增加

1 个答案: