[英]kendo grid columns width not adjusting properly If I use column menu
I am using kendo column menu in my grid.If I uncheck item in the columnmenu then the column width are not properly occupying the full width . 我在网格中使用kendo列菜单。如果我未选中columnmenu菜单中的项目,则列宽不能正确占据全宽。 can any one help me how to fix this.
谁能帮我解决这个问题。
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");
check this fiddle 检查这个小提琴
http://jsfiddle.net/OnaBai/JCSGz/ http://jsfiddle.net/OnaBai/JCSGz/
The problem is because the width
specified for each column. 问题是因为为每列指定了
width
。 When the grid is initially loaded it ignores the width and just uses it as a proportion of the total. 最初加载网格时,它会忽略宽度,仅将其用作总宽度的一部分。 When you use column menu then it forces the width to what you say.
当您使用列菜单时,它会将宽度强制为您所说的宽度。
Depending on what you want to achieve simply remove width
from the column definition or make sure that Grid
has the desired width. 根据您要实现的目标,只需从列定义中删除
width
,或确保Grid
具有所需的宽度。
Example with columns resizing to use full width of the grid here http://jsfiddle.net/OnaBai/JCSGz/2/ 列大小调整为使用网格全宽的示例,此处http://jsfiddle.net/OnaBai/JCSGz/2/
If what you want is to resize the table to keep each column width, you should: 如果要调整表的大小以保持每列的宽度,则应:
CSS: CSS:
#grid {
width: 300px
}
JavaScript: 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");
Running example in JSFiddle here: http://jsfiddle.net/OnaBai/JCSGz/4/ 在此处的JSFiddle中运行示例: http : //jsfiddle.net/OnaBai/JCSGz/4/
I was in same problem, I got solution on this link 我遇到了同样的问题,我在此链接上找到了解决方案
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);
}
}
}
}
Try these way in order to set the columns width with different option (%, px, auto): 尝试以下方法,以便使用其他选项(%,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)
})
)
Hope this helps... 希望这可以帮助...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.