グリッドウィジェット
グリッドウィジェットを使用すると、任意のデータセットをグリッドビューで表示できます。グリッドでは、さまざまな方法でデータをレンダーできます (列ごとのカラーコンテキストの設定やセル内のイメージのレンダリングなど)。グリッドウィジェットのコンフィギュレーションダイアログの Configure Grid Columns セクションを使用して、列の順序、表示する列、列見出し、状態のフォーマットなどの基本的なレンダリングを設定できます。
グリッドでは、ランタイム環境における列のサイズ変更や、列ヘッダーのクリックによるデータの並べ替えがサポートされます。
編集可能なグリッド
グリッドに対しては、Configure Grid Columns オプション内に、ウィジェットによるグリッド内の行/列の編集を可能にする特別な設定もあります。これにより、グリッド内で値を編集して、コンテンツ全体をサービスに戻すことができます。または、グリッド内に Selected Row を表示している場合は、その特定の行を戻すことができます。最良事例は Selected Row のみを使用することです。テーブルの大きさによっては、メモリの使用状況に影響する可能性があるからです。
詳細については、次のビデオチュートリアルを参照してください。
 | スタイルおよび共通のウィジェットプロパティは、次の表には含まれていません。 |
プロパティ名 | 説明 | ベースタイプ | デフォルト値 | バインド可能か(Y/N) | ローカライズ可能か(Y/N) | ||
|---|---|---|---|---|---|---|---|
CustomClass | ウィジェットの最上位の div に適用するユーザー定義の CSS クラス。スペースで区切って、複数のクラスを入力できます。 | STRING | 該当なし | Y | N | ||
RowFormat | 動的な (状態) フォーマットを行ベースで適用するオプションの規則で、セルの状態フォーマットによってオーバーライドできます。 | STATE FORMATTING | 状態のフォーマット | N | N | ||
MultiSelect | 複数のアイテムの選択を許可します。 | BOOLEAN | False | N | N | ||
IsEditable | グリッド内の値の編集を許可するか。 | BOOLEAN | False | N | N | ||
AutoSelectFirstRow | データの初期ロード時に 1 行目を自動的に選択します。 | BOOLEAN | False | N | N | ||
CellTextWrapping | セルの値を折り返して表示します。 | BOOLEAN | False | N | N | ||
Data | このプロパティのデータソースであるインフォテーブル。 | INFOTABLE | 該当なし | Y | N | ||
CurrentScrollTop | 現在のスクロール先頭。 | NUMBER | 0 | Y | N | ||
ScrollTop | スクロール先頭を指定。 | NUMBER | 0 | Y | N | ||
EditedTable | グリッドを使用して編集するテーブル。 | INFOTABLE | 該当なし | Y | N | ||
RowHeight | 行の高さ。 | NUMBER | 30 | N | N | ||
ShowAllColumns | 使用可能なすべての列を表示します。インフォテーブルにデータシェイプがない場合は、ShowAllColumns を使用する必要があります。
| BOOLEAN | False | N | N | ||
ShowDataLoading | ロード中のデータを表示します。 | BOOLEAN | True | N | N | ||
DoubleClicked | イベント。データオブジェクトはシングルクリックで選択できる状態のまま、別のイベントにダブルクリックを使用できます (ダブルクリックをナビゲーションリンクのトリガとリンクするなど)。 | 該当なし | 該当なし | Y | N | ||
Visible | ウィジェットをランタイムで表示するか。 | BOOLEAN | True | Y | N |
グリッドのコンフィギュレーション
データサービスをグリッドにリンクした後、Grid Column Configuration ダイアログを開きます。列の非表示チェックボックスを使用して、どの列を表示するかを選択できます (true = 表示、false = 非表示)。表示する列のリスト内の順序を変更するには、その列を上下にドラッグします。
列タイトルは、データサービスのデータシェイプによって自動的に割り当てられますが、コンフィギュレーションダイアログ内で列ごとにオーバーライドできます。列ごとに以下の操作も実行できます。
• セルのレンダラーを選択します (表示するデータ内の特定のデータ型の処理に使用 - 推奨)。
• 自動幅または固定幅を選択します。
• テキスト整列を選択します。
• スタイル (固定または状態のフォーマット) を選択します。
• 編集可能にする列 (検証あり/なし) を指定します。
固定 (動的ではない) スタイルを適用する場合は、「固定スタイル」を選択し、以前に定義したスタイル定義を選択します。動的なフォーマット (行で返されるデータに基づくカラーコンテキストなど) を行う場合は、状態ベースのフォーマットを選択します。
状態ベースのフォーマットでは、データの各列を個別に設定し、行のデータに基づいて特定のスタイルを列に適用します。状態フォーマッタを定義する列ごとに以下の操作を行う必要があります。
• フォーマットの依存先となる列を選択します (表示/非表示に関係なく、返されるデータサービス内の任意の列を選択できます)。
• 使用する状態定義を選択します (列ごとに 1 つで、依存フィールドのデータ型と一致する必要があります)。
• 状態定義のデフォルト値をそのまま使用するか、このグリッド定義とレンダリングに対してはデフォルト値をオーバーライドします。
グリッドを編集可能に設定した場合、特定の列を編集可能に指定することもできます。JavaScript の比較を使用して、列の名前に基づく検証を追加することもできます。
例:
Validation - Column1 > 5 && Column3 < 10
Message - You must have Col 1 > 5 and Col 3 < 10
Message - You must have Col 1 > 5 and Col 3 < 10