KendoUI Grid 列自动调整大小答案

【问题标题】：KendoUI Grid column autosizingKendoUI Grid 列自动调整大小
【发布时间】：2013-08-28 21:48:50
【问题描述】：

我正在尝试创建一个网格，该网格必须具有自动调整列的大小（在某些限制内），并且其宽度不得超过父 div 的宽度。

我有 4 列：

       col1        col2    col3    col4
------------------------------------------
| very long text |  ...  |  ...  |  ...  |
|     ...        |  ...  |  ...  |  ...  |
------------------------------------------

第一列中的值很长，所以我使用样式：white-space: nowrap; text-overflow: ellipsis; 文本保持在一行中。我希望 col2 为 105-170px、col3 40-190px 和 col4 75-150px。我喜欢让它尽可能小，以避免出现巨大的空白。

我知道通过设置scrollable: true 可以实现类似的效果，但我不需要滚动条，我真的不喜欢它放在那里没有用处。

【问题讨论】：

标签： css kendo-ui kendo-grid autosize

【解决方案1】：

在尝试了不同的选项和数小时的搜索之后，我决定使用不太优雅的解决方案，但我已经实现了我想要的。如果有人遇到类似的问题，这就是我所做的：

当 DOM 加载时（$(document).ready(...) 或 jQuery 中的 $(...)），我调用代码来删除右 padding-right 的 .k-grid-header 并删除 overflow-y 的 .k-grid-content。

我用过的代码：

// jQuery code
$(".k-grid-header").css("padding-right","0");
$(".k-grid-content").css("overflow-y","initial");

// JS (without jQuery) equivalent
var gridHeaders = document.querySelectorAll(".k-grid-header");
for (var i = 0, element; element = gridHeaders[i++];)
    element.paddingRight = "0";

var gridContent = document.querySelectorAll(".k-grid-content");
for (var i = 0, element; element = gridContent [i++];)
    element.overflowY = "initial";

【讨论】：