我在我的网格中使用剑道列菜单。如果我取消选中列菜单中的项目,那么列宽就不能正确地占据整个宽度。有人能帮助我如何解决这个问题吗?
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");
检查一下这把小提琴
http://jsfiddle.net/OnaBai/JCSGz/
3条答案
按热度按时间nfs0ujit1#
问题是因为为每列指定了
width
。当网格最初加载时,它忽略了宽度,只是将其用作总数的一个比例。当您使用列菜单时,它会强制宽度为您所说的宽度。根据您想要实现的目标,只需从列定义中删除
width
或确保Grid
具有所需的宽度。调整列大小以使用网格全宽的示例,此处为http://jsfiddle.net/OnaBai/JCSGz/2/
如果您想要调整表格的大小以保持每列的宽度,您应该:
1.定义网格宽度,例如使用CSS样式
1.将函数绑定到columnShow事件并将列宽添加到网格的当前宽度。
1.将函数绑定到columnHide事件,并将列宽减去网格的当前宽度。
CSS:
JavaScript语言:
在JSFiddle中运行示例:http://jsfiddle.net/OnaBai/JCSGz/4/
r7knjye22#
我遇到了同样的问题,我在this link上获得了解决方案
z9zf31ra3#
尝试这些方式,以设置不同的选项(%,px,自动)的列宽: