5
JavaScriptからスクロール可能な剣道グリッドにバインドしようとしていて、列幅に問題があります。このfiddleは問題を示しています（質問の最後のコード）。私は、HTMLのヘッダーを指定し、ヘッダーの1つに幅を追加しています。その後、javascriptはdataSourceを設定します（プロダクションコードでは、これはajax呼び出しによって行われます）。剣道グリッド列幅+スクロール可能
私は、自動的に必要な列を識別することができます私のviewmodelsを慎重に構築されているので、多くのグリッドを持って
- ので、JavaScriptでcolumns.widthプロパティを設定することを避けるためにしたいです。私たちのアプリには100以上の鳥があり、それらすべての列リストを指定しなければならないのは扱いにくいでしょう。
- とにかく、これはスタイリング情報です。
この機能は、剣道がヘッダー用とスクロール用の2つのグリッドを作成しているためです。しかし、過去に私が使っていた他のコントロールライブラリでは、同様のことをして、2つのテーブルを同期させながら宣言的なスタイリングを容易にするために、常に2つのグリッド間のスタイリング情報をコピーしました。これは道です。フィドル
<table>
<thead>
<th class="p20" data-field="status">Status</th>
<th data-field="description">Description</th>
</thead>
</table>
から
HTML Javascriptの
$('table').kendoGrid({
dataSource: [
{ status: 'On', description: 'a longer description' },
{ status: 'On', description: 'a longer description' },
{ status: 'On', description: 'a longer description' },
{ status: 'On', description: 'a longer description' },
{ status: 'On', description: 'a longer description' },
{ status: 'On', description: 'a longer description' }
],
scrollable: true
});
ここでCSS
.k-grid-content {
height: 100px;
}
.p20 {
width: 20%;
}
これはうまくいくが、javascriptではなくマークアップで幅を指定したい。すべてのグリッドについて各列の詳細を指定することは、はるかに面倒な作業であり、意味的にはスタイリングを指定するのは間違った場所です（意味的に言えば）。 –
はい、私は、あなたが何について話しているのか、後で気づいた、昨日の質問とは少し違う。どのようにテキスト/値の幅が20％を超えるグリッドに対処する予定ですか？同じデータを常に列に表示しますか？幅と同期の違いを避けるために、必要に応じてすべての列とヘッダーに幅を設定し、省略記号（「私の不完全な値...」）を展開することができます。 – Vojtiik
基本的に、剣道は、スクロール可能なグリッド（最初は面倒です）のテーブルレイアウトを「固定」に設定しています。私たちは、ステータスインジケータのアイコンであるいくつかの列を持っており、それらをわずか数ピクセル幅に設定したいと考えています。 他のすべての省略記号が表示され、グリッドもサイズ変更可能に設定され、必要に応じて水平スクロールバーが表示されます（機能の種類の例については、Azure管理ポータルのグリッドを参照してください）。剣道は、複雑さを消費者に見せないようにすることなく、「2つのグリッド」アプローチをとっていることは残念です。 –