Question

我有一个带动态列定义的大型Kendo Grid。我目前的实现是使用带有所有固定宽度列的可滚动网格。虽然，需要有一些自动宽度的列，而其他列有固定长度。我注意到，当我有一些固定长度列的自动宽度时，它们只是不会出现在网格中。

我知道Auto Width和Scrollable网格是相互排斥的功能，但想知道是否有人找到了解决此问题的方法。我一直在调整网格以获得额外的功能。我现在唯一的解决方案是我有一个脚本来解析行并自动扩展那些需要的东西..但它的操作很昂贵并且会减慢用户体验。

有什么想法吗？

谢谢大家。

修改我希望能够将这几个自动宽度列放在一行上。更具体地说，我有固定长度的数字列和其他一些描述。我想让这些列适合一行而不是被包装或隐藏。也就是说，让我的网格水平滚动。

Answer 1

Ross是正确的......如果网格的宽度太小，则在分配固定列之后，会为自动宽度列分配剩余宽度。这通常是零，然后你就被卡住了。

我的解决方法（HACK !!!）就是在网格上设置一个最小宽度，它是固定宽度的总和加上可以在自动宽度列之间平均分配的额外数量。然后我调用一个自定义的ensureMinWidth（）函数，该函数根据最小宽度修复Grid表格和标题元素的宽度，以便autowidth列分配一些空间。

这很麻烦，但它可以防止列消失。

设置最小宽度：

<style>
/* Force initial min-width to fit all the columns so that the Title column
    (which is set to take up the remaining space) will not disappear when remaining space is 0 on initial screen load.
    Grid.ensureMinWidth() javascript will deal with it at runtime.
*/
#grid .k-grid-header-wrap > table, /* header table */
#grid .k-grid-content table, /* data table, no virtual scrolling */
#grid .k-virtual-scrollable-wrap table /* data table, with virtual scrolling */ {
    min-width: 600px; /* Width of fixed columns plus enough space so that autowidth columns don't disappear, i.e. min column width of auto columns */
}
 </style>

辅助函数：

<script>
/* Ensures that a grid will that has too many columns to fit in the viewport will not shrink dynamic width
    columns to 0 if there is no space left and then makes sure that the column resizing continues to function
    without weird jumping around/misalignment with the cursor that the out-of-the-box solution creates. 
    NOTE:
    1. MUST be used in conjunction with the grid tables being given an initial min-width at design-time.
    2. Due to the way Kendo binds the Grid's resizable with ajax data, this must be called on every dataBound
        rather than just during Grid initialization. */
kendo.ui.Grid.prototype.ensureMinWidth = function () {
    if (this.resizable) {
        this.resizable.bind("resize", function (e) {
            var minTableWidth,
                th = $(e.currentTarget).data("th"),
                grid = th.closest(".k-grid").getKendoGrid();

            if (e.x.delta > 0) {
                minTableWidth = grid.tbody.closest("table").width();
            }
            else {
                minTableWidth = grid.tbody.closest("table").width() + e.x.delta;
            }
            if (grid.options.scrollable) {
                grid.thead.closest("table").css({ "min-width": minTableWidth });
            }
            grid.tbody.closest("table").css({ "min-width": minTableWidth });
        });
    }
}
</script>

然后你只需在Grid的dataBound事件中调用ensureMinWidth（）。

单独设置最小宽度可能对您有用，但我发现在我的表单上需要辅助函数，我调整网格大小以占用浏览器视口中剩余的空间...您的结果可能会有所不同。

示例：http://dojo.telerik.com/@Stephen/IlUYun

剑道网格 - 自动宽度＆amp;滚动

1 个答案: