剣道グリッド - 自動車幅＆スクロール

Question

私は動的な列定義で大きな剣道グリッドを持っています。私の現在の実装では、すべての固定幅の列を持つスクロールグリッドを使用しています。けれどもは、一定の長さと他人ながら自動幅の一部の列を持つ必要性を思い付きました。私は固定長の列でいくつかの自動幅を持っているとき、それらがグリッドに表示されないことに気付きました。

私は自動幅とスクロールグリッドが相互に排他的な機能ですが、誰もがこの問題の解決策を発見したかどうかを知りたいと思ったことを知っています。私はそれの余分な機能を得るために多くのグリッドを調整してきました。今私の唯一の解決策は、私は行を解析し、必要なものを自動拡張するスクリプトを持っていることです。しかし、その高価な操作とユーザーエクスペリエンスの低下。

アイデア？

ありがとうございました。

編集： 私は、これらのいくつかの自動幅の列を1行に収めたいと考えています。より具体的には、私は数字といくつかの他の説明と長さの列を固定している。私は、これらの列を1行に収めてラップしたり隠したりしないでください。つまり、グリッドを水平にスクロールさせることです。

Answer 1

ロスが正しいです...グリッドの幅が小さすぎると固定列が割り当てられた後、autowidth列は残りの幅が割り当てられます。これはしばしばゼロになります。

私の回避策（HACK !!!）は、固定幅と自動幅の列の間で等しく分割できる余分な量の合計であるグリッドに最小幅を設定することです。次に、カスタム幅のensureMinWidth（）関数を呼び出して、最小幅に基づいてグリッドの表とヘッダー要素の幅を修正し、自動幅の列に割り当てられるスペースを確保します。

それはハックだが、それが消えてから列を防ぐことができます。

<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（呼び出し）グリッドのデータバインドされたイベントで最小幅を設定

。

min-widthの設定だけでも問題はありますが、ブラウザビューポートに残っているスペースを取るためにグリッドのサイズを変更するフォームでヘルパー機能が必要であることがわかりました。 。

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