Kendo Grid - 自动宽度和滚动

Question

我有一个大的Kendo网格，具有动态列定义。我目前的实施是使用可滚动网格与所有固定宽度列。虽然，想出了需要有一些列与汽车宽度而其他与固定长度。我注意到，当我有一些固定长度列自动宽度，他们只是不显示在网格中。

我知道自动宽度和可滚动网格是互斥的功能，但想知道是否有人找到了解决此问题的方法。我一直在调整网格以获得额外的功能。我现在唯一的解决方案是，我有一个脚本来分析行并自动扩展需要的行。但是，这是一个昂贵的操作，会降低用户体验。

任何想法？

谢谢大家。

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

Answer 1

Ross是正确的...如果网格的宽度太小，autowidth列会在分配固定列后得到剩余宽度。这通常是零，然后你卡住了。

我的解决方法（HACK !!!）是在网格上设置一个最小宽度，该最小宽度是固定宽度的总和加上可以在自动宽度列之间平分的额外数量。然后我调用一个自定义的ensureMinWidth（）函数，该函数根据最小宽度修正网格的表格和标题元素的宽度，以便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> 

然后你只需要调用ensureMinWidth（）在网格中的数据绑定事件。

单独使用最小宽度的设置可能适用于您，但我发现需要在窗体上调整网格以占用浏览器视口中剩余的空间的帮助器功能...您的结果可能会有所不同。

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