[英]kendo grid columns width not adjusting properly If I use column menu
我在網格中使用kendo列菜單。如果我未選中columnmenu菜單中的項目,則列寬不能正確占據全寬。 誰能幫我解決這個問題。
var grid = $("#grid").kendoGrid({
dataSource: {
data : createRandomData(100),
pageSize : 10,
schema: {
model: {
fields: {
Id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' }
}
}
}
},
pageable : true,
columnMenu: true,
columns : [
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 90, title: "Last Name" },
{ field: "City", width: 100 }
],
dataBound: function () {
$(".k-header-column-menu").kendoTooltip({
content: "column menu"
});
}
}).data("kendoGrid");
檢查這個小提琴
問題是因為為每列指定了width
。 最初加載網格時,它會忽略寬度,僅將其用作總寬度的一部分。 當您使用列菜單時,它會將寬度強制為您所說的寬度。
根據您要實現的目標,只需從列定義中刪除width
,或確保Grid
具有所需的寬度。
列大小調整為使用網格全寬的示例,此處http://jsfiddle.net/OnaBai/JCSGz/2/
如果要調整表的大小以保持每列的寬度,則應:
CSS:
#grid {
width: 300px
}
JavaScript:
var grid = $("#grid").kendoGrid({
dataSource: {
data : createRandomData(100),
pageSize : 10,
schema: {
model: {
fields: {
Id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' }
}
}
}
},
pageable : true,
columnMenu: true,
columnHide: function (e) {
this.wrapper.width(grid.wrapper.width() - e.column.width);
},
columnShow: function (e) {
this.wrapper.width(grid.wrapper.width() + e.column.width);
},
columns : [
{ field: "FirstName", width: 100, title: "First Name" },
{ field: "LastName", width: 50, title: "Last Name" },
{ field: "City", width: 150 }
],
dataBound: function () {
$(".k-header-column-menu").kendoTooltip({
content: "column menu"
});
}
}).data("kendoGrid");
在此處的JSFiddle中運行示例: http : //jsfiddle.net/OnaBai/JCSGz/4/
我遇到了同樣的問題,我在此鏈接上找到了解決方案
function loadColumnState(columnStateKey: string, realGrid): void
{
var colState = JSON.parse($.jStorage.get(columnStateKey));
if(colState && colState.length > 0)
{
var visibleIndex = -1;
for (var i = 0; i < colState.length; i++)
{
var column = colState[i];
// 1. Set correct order first as visibility and width both depend on this.
var existingIndex = -1;
if (typeof column.field !== 'undefined')
{
existingIndex = findFieldIndex(realGrid, column.field);
}
else if (typeof column.commandName !== 'undefined')
{
existingIndex = findCommandIndex(realGrid, column.commandName);
}
if (existingIndex > -1 && existingIndex != i) // Different index
{ // Need to reorder
realGrid.reorderColumn(i, realGrid.columns[existingIndex]);
}
// 2. Set visibility state
var isHidden = (typeof column.hidden === 'undefined') ? false : column.hidden;
if (isHidden)
{
realGrid.hideColumn(i);
}
else
{
realGrid.showColumn(i);
++visibleIndex;
}
// 3. Set width
var width = (typeof column.width === 'undefined') ? null : column.width;
if(width != null)
{
realGrid.columns[i].width = width; // This sets value, whilst rest redraws
realGrid.thead.prev().find('col:eq(' + visibleIndex + ')').width(width);
realGrid.table.find('>colgroup col:eq(' + visibleIndex + ')').width(width);
}
}
}
}
嘗試以下方法,以便使用其他選項(%,px,自動)設置列寬:
@(Html.Kendo().Grid<TrainingViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(t => t.Name).Title("Training Name").Width("%100"); //set width in %
columns.Bound(t => t.Date).Title("Date").Width("150px"); //set width in pixel
columns.Bound(t => t.CityName).Title("City"); //set width auto (no width property)
})
)
希望這可以幫助...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.