web-dev-qa-db-ja.com

剣道グリッド、水平スクロール、列サイズ

デフォルトでは、剣道グリッドは、含まれているdivを埋めるように拡張されます。その単なるテーブル要素なので、本質的に。

<table role="grid">
<colgroup>
<col style="width:200px"> // etc
<colgroup>
<thread>
// content
</thread>
</table>

ただし、列を追加すると（または列が多すぎると）、収まるように前後に拡大縮小されます。オーバーフロー時に水平スクロールバーが必要でした。

これを行うために、開始時に実行されるコードを追加し、追加して並べ替えました。

  this._initWidths = function () {
     var totalWidth = 0;
     for (var i = 0; i < grid.columns.length; i++) {
        var width = grid.columns[i].width;
        $('#myGrid .k-grid-header-wrap colgroup col').eq(i).css('width', width + 'px');
        $('#myGrid .k-grid-content colgroup col').eq(i).css('width', width + 'px');
        totalWidth = totalWidth + width;
     }
     table.css('width', totalWidth + 'px');
  };

しかし、剣道にはこれにぶつかる独自の論理があるようです。 Colgroupエントリは削除され始め、すべてを台無しにします。

これを止めるために私にできることはありますか？私がやりたいことをするためのより良い方法はありますか？

ありがとう。

javascriptkendo-uikendo-grid
9
Tim

私は次のようなテーブルのコンテナを持っています：

<div id="myWindow">
    <div id="myGrid"></div>
</div>

次のスタイルを適用しました。

#myWindow {
    width: 400px;
    overflow-x: scroll;
}

ここで、幅を400pxに強制し、オーバーフローしたものを非表示（およびスクロール）していることがわかります。

次に、次のgridを定義します。

var grid = $("#myGrid").kendoGrid({
    dataSource : {
        data    : entries,
        schema  : {
            model: {
                id: "city"
            }
        },
        pageSize: 5
    },
    columns    : [
        { field: "city", title: "City", width: 100 },
        { field: "time", title: "Time", format: "{0:HH:mm}", width: 200},
        { field: "datetime", title: "Date - Time", format: "{0:yyyy-MM-dd HH:mm}", width: 300 }
    ],
    sortable   : {
        mode       : "single",
        allowUnsort: false,
        field      : "city"
    },
    editable   : "popup",
    navigatable: true,
    pageable   : true
}).data("kendoGrid");

グリッドがコンテナのサイズで水平方向にオーバーフローするという効果があります。

実行中を参照してください ここ

[〜＃〜] note [〜＃〜]pagingが400pxのままで、常に目に見える状態になっているのは素晴らしいことです。グリッドは実際には100 + 200 + 300 = 600（widthのcolumns）

EDIT：widthのgridをcolumns次に、追加する必要があります（グリッドを初期化した後）。

var totalWidth = 0;
for (var i = 0; i < grid.columns.length; i++) {
  var width = grid.columns[i].width;
  totalWidth = totalWidth + width;
}
grid.element.css('width', totalWidth + 'px');

ループが全幅を計算してから、テーブルをそれに設定します（列が正しいため、列を変更する必要はありません）。

設定 ここ

9
OnaBai

グリッドがスクロール可能であることを確認し、グリッドを作成する要素の幅を設定する必要があります。

<div id="myGrid" style='width:500px;'></div>

var grid = $("#myGrid").kendoGrid({
    scrollable:true,
    //...
})

ここ 動作中です。

9
Petur Subev