0
我設置了第一列固定寬度爲'31px',但是當所有列都通過調整容器大小來調整大小並調整大小時,第一列與get增加。在feddle示例中,如果您使Title and Age列的大小與Screen shot一樣小,然後調整大小,您將看到第一列寬度增加。Kendo UI固定寬度列大小在調整柵格大小時得到增加
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");
}
}
請注意,問題**必須包含**問題**(例如,最後)。通過這種方式,您可以磨礪您的問題,並更輕鬆地回答問題。 –
爲什麼不使用.resize小部件方法而不是手動執行?以下是窗口更改時調整大小的示例http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/resize-grid-when-the-window-is-resized – tede24