wj-flex-grid ディレクティブを使用して、AngularJSアプリケーションにグリッドを追加できます。 ディレクティブ名とパラメーター名の書式は、キャメルケースではなくダッシュで結んだ小文字にする必要があります。 次に例を示します。

<p>FlexGrid コントロールの例：</p>
<wj-flex-grid items-source="data">
  <wj-flex-grid-column
    header="Country"
    binding="country">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    header="Sales"
    binding="sales">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    header="Expenses"
    binding="expenses">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    header="Downloads"
    binding="downloads">
  </wj-flex-grid-column>
</wj-flex-grid>

この例では、FlexGridコントロールを作成し、それをコントローラから公開されている'data'配列に連結しています。 グリッドには3つの列があり、それぞれが ソース配列に含まれるオブジェクトの1つのプロパティに対応しています。

デモ

wj-flex-grid ディレクティブは、次の属性をサポートします。

allow-add-new

@ ユーザーがソースコレクションに項目を追加できるように、 新しい行テンプレートを表示するかどうかを示す値。

allow-delete

@ ［Del］キーが押されたときに、グリッドで 選択されている行を削除するかどうかを示す値。

allow-dragging

@ ユーザーがマウスを使用して行と列をドラッグできるかどうかと、 その方法を示す AllowDragging 値。

allow-merging

@ グリッドのどの部分がセル結合を提供するかを 示す AllowMerging 値。

allow-resizing

@ ユーザーがマウスを使用して行と列を サイズ変更できるかどうかを示す AllowResizing 値。

allow-sorting

@ ユーザーが列ヘッダーをクリックして 列をソートできるかどうかを示すboolean値。

auto-generate-columns

@ グリッドが items-source に基づいて 列を自動的に生成するかどうかを示すboolean値。

child-items-path

@ 階層グリッドで子の行を生成するために使用される プロパティの名前（異なる階層レベルにある項目の子項目に異なる名前を 使用する場合は、プロパティ名の配列）。

control

= このディレクティブによって作成された FlexGrid コントロールへの参照。

defer-resizing

= ユーザーがマウスボタンを放すまで行と列のサイズ変更を 遅延するかどうかを示すboolean値。

frozen-columns

@ グリッド内の固定（スクロール不可能）列の数。

frozen-rows

@ グリッド内の固定（スクロール不可能）行の数。

group-header-format

@ グループヘッダーコンテンツの作成に使用される 書式文字列。

headers-visibility

= 行ヘッダーと列ヘッダーを表示するかどうかを示す HeadersVisibility 値。

ime-enabled

@ 編集モードでないときに、グリッドがIME（Input Method Editor）を サポートするかどうかを決定する値を取得または設定します。

initialized

& このイベントは、属性値でコントロールを初期化して連結処理が完了した後に発生します。

is-initialized

= 属性値でコントロールを初期化して連結処理が完了したかどうかを示す値。

item-formatter

= このグリッドのセルをカスタマイズする関数。

items-source

= グリッドに表示される項目を含む配列または ICollectionView オブジェクト。

is-read-only

@ ユーザーがグリッドセルにキー入力して編集でき ないようにされているかどうかを示すboolean値。

merge-manager

= 指定されたセルの結合範囲を指定する MergeManager オブジェクト。

selection-mode

@ ユーザーがセルを選択できるかどうかと、 その方法を示す SelectionMode 値。

show-groups

@ グループ行を挿入してデータグループを区切るかどうかを 示すboolean値。

show-sort

@ 列ヘッダーにソートインジケータを表示するかどうかを 示すboolean値。

sort-row-index

@ 現在のソートを表示および変更する、列ヘッダーパネル内の 行のインデックスを指定する数値。

tree-indent

@ 異なるレベルの行グループをオフセットするために 使用されるインデント（ピクセル単位）。

beginning-edit

& FlexGrid.beginningEdit event.

cell-edit-ended

& FlexGrid.cellEditEnded イベントのハンドラ。

cell-edit-ending

& FlexGrid.cellEditEnding イベントのハンドラ。

prepare-cell-for-edit

& FlexGrid.prepareCellForEdit イベントのハンドラ。

resizing-column

& FlexGrid.resizingColumn イベントのハンドラ。

resized-column

& FlexGrid.resizedColumn イベントのハンドラ。

dragged-column

& FlexGrid.draggedColumn イベントのハンドラ。

dragging-column

& FlexGrid.draggingColumn イベントのハンドラ。

sorted-column

& FlexGrid.sortedColumn イベントのハンドラ。

sorting-column

& FlexGrid.sortingColumn イベントのハンドラ。

deleting-row

& FlexGrid.deletingRow イベントのハンドラ。

dragging-row

& FlexGrid.draggingRow イベントのハンドラ。

dragged-row

& FlexGrid.draggedRow イベントのハンドラ。

resizing-row

& FlexGrid.resizingRow イベントのハンドラ。

resized-row

& FlexGrid.resizedRow イベントのハンドラ。

row-added

& FlexGrid.rowAdded イベントのハンドラ。

row-edit-ended

& FlexGrid.rowEditEnded イベントのハンドラ。

row-edit-ending

& FlexGrid.rowEditEnding イベントのハンドラ。

loaded-rows

& FlexGrid.loadedRows イベントのハンドラ。

loading-rows

& FlexGrid.loadingRows イベントのハンドラ。

group-collapsed-changed

& FlexGrid.groupCollapsedChanged イベントのハンドラ。

group-collapsed-changing

& FlexGrid.groupCollapsedChanging イベントのハンドラ。

items-source-changed

& FlexGrid.itemsSourceChanged イベントのハンドラ。

selection-changing

& FlexGrid.selectionChanging イベントのハンドラ。

selection-changed

& FlexGrid.selectionChanged イベントのハンドラ。

got-focus

& FlexGrid.gotFocus イベントのハンドラ。

lost-focus

& FlexGrid.lostFocus イベントのハンドラ。

scroll-position-changed

&FlexGrid.scrollPositionChanged イベントのハンドラ。

wj-flex-grid ディレクティブには、 wijmo.angular.grid.WjFlexGridColumn、 wijmo.angular.grid.WjFlexGridCellTemplate 、 wijmo.angular.grid.detail.WjFlexGridDetail の各子ディレクティブを入れることができます。