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