javascript 如果我使用列菜单，kendo 网格列宽度没有正确调整
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19021608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
kendo grid columns width not adjusting properly If I use column menu
提问by steve
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 . 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
检查这个小提琴
回答by OnaBai
The problem is because the widthspecified for each column. 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.
问题是因为width为每一列指定了。最初加载网格时，它会忽略宽度，仅将其用作总数的一部分。当您使用列菜单时，它会强制宽度为您所说的那样。
Depending on what you want to achieve simply remove widthfrom the column definition or make sure that Gridhas 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:
如果您想要调整表格的大小以保持每列的宽度，您应该：
- Define the grid width for example using CSS style
- Bound a function to columnShow event and add the width of the column to the current width of the Grid.
- Bound a function to columnHide event and subtract the width of the column to the current width of the Grid.
- 例如使用 CSS 样式定义网格宽度
- 将一个函数绑定到 columnShow 事件并将列的宽度添加到 Grid 的当前宽度。
- 将函数绑定到 columnHide 事件并将列的宽度减去网格的当前宽度。
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/
回答by Sagar Kulkarni
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);
}
}
}
}
回答by Murat Y?ld?z
Try these way in order to set the columns width with different option (%, px, auto):
尝试这些方法以使用不同的选项（%、px、auto）设置列宽：
@(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...
希望这可以帮助...
