Mashup Builder > ウィジェット > レガシーウィジェット > グリッドウィジェット (レガシー)
グリッドウィジェット (レガシー)
グリッドウィジェットを使用すると、任意のデータセットをグリッドビューで表示できます。グリッドでは、さまざまな方法でデータをレンダーできます (列ごとのカラーコンテキストの設定やセル内のイメージのレンダリングなど)。グリッドウィジェットのコンフィギュレーションダイアログの 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
これは役に立ちましたか?