4

我在我的网格中使用剑道列菜单。如果我取消选中列菜单中的项目，那么列宽没有正确占据整个宽度。谁能帮我解决这个问题。

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/

4

3 回答 3

3

问题是因为width为每一列指定。最初加载网格时，它会忽略宽度，仅将其用作总数的一部分。当您使用列菜单时，它会强制宽度为您所说的。

根据您想要实现的目标，只需width从列定义中删除或确保其Grid具有所需的宽度。

列调整大小以在此处使用网格的全宽的示例http://jsfiddle.net/OnaBai/JCSGz/2/

如果您想要调整表格大小以保持每列宽度，您应该：

  1. 例如使用 CSS 样式定义网格宽度
  2. 将函数绑定到 columnShow 事件并将列的宽度添加到 Grid 的当前宽度。
  3. 将函数绑定到 columnHide 事件并将列的宽度减去 Grid 的当前宽度。

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/

于 2013-09-26T10:24:14.963 回答
0

尝试这些方式以使用不同的选项（%、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)
    })
)

希望这可以帮助...

于 2015-03-13T11:04:39.390 回答
0

我遇到了同样的问题，我在这个链接上得到了解决方案

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); 
            }                              
        }
    }    
}
于 2014-02-21T06:37:28.533 回答