Mashup Builder > ウィジェット > 標準ウィジェット > グリッドウィジェット
グリッドウィジェット
インフォテーブルソースのデータを検査、表示、分析するには、グリッドウィジェットを使用します。データソース内の各インフォテーブル列がグリッドの列として表示されます。
カスタム操作をグリッドツールバーに表示します。
グリッドに追加された新規行をハイライトします。
ShowRowNumbers プロパティを動的に設定します。
グリッドがページ付けされている場合にページが切り替えられたときに、選択行の ID を保持します。
ハイパーリンクがクリックされたときに、URL を開く代わりにイベントをトリガーします。たとえば、リンクデータを渡してマッシュアップに移動できます。
子データをバインドして、複数のレベルの親データと子データから成る階層ツリーグリッドを作成します。
ランタイムでユーザーが展開可能な最大行数を設定します。
アドバンスグリッドからレガシー動的コンフィギュレーションを移行します。
サービスで行の ID を指定して、行を自動的に展開します。
親行とその子を無効にします。
キーボードナビゲーションを使用しているときのフォーカスボックスの選択動作を設定します。
「検証」パネルで検証メッセージの表示とアイコンを設定します。
グリッド、行、またはセルレベルでの編集を有効にします。
ランタイムで列のサイズ変更と順序変更を行います。
グリッドの列の表示、非表示、および順序変更を行うことができるランタイムメニューを表示します。
編集が有効になっている場合に、入力を検証するための検証規則とメッセージを定義します。
個別の列に行番号を表示します。
グリッド列の最小幅と最大幅を設定します。
JSON コンフィギュレーションデータを使用してウィジェットを動的に設定します。
* 
グリッド (アドバンス) ウィジェットの既存のデータサービスの出力を JSON に更新しなければなりません。
フッターセクションを追加します。
行を削除する際に確認メッセージを表示します。
レンダラーを使用してデータ列をフォーマットし、状態フォーマットを適用する。
列データを降順または昇順で並べ替える。
フィルタボックスを使用してデータをフィルタする。
ヘッダーと本文のセル内でコンテンツを整列する。
行選択用のチェックボックスを表示する。
列幅を自動的に設定するか、ピクセル、パーセント、または小数値を使用して手動で設定する。
ヘッダーと本文の行を 1 行で表示し、テキストの折り返しを行わない。
グリッド行の最小高さと最大高さを設定する。
グリッド上で 1 つまたは複数の行を選択する。
さらに、グリッドをページ付け、チップベースのデータフィルタ、ツールバーなどのほかのウィジェットと組み合わせることで、マッシュアップ内に一意の対話型データビューを作成できます。
* 
グリッドウィジェットは ThingWorx Web Component SDK で Web コンポーネントとしても使用できます。
パフォーマンスに関する注意事項
グリッドウィジェットでは数百万行から成る大きなデータセットがサポートされます。ただし、数百万の行を表示するとパフォーマンスが低下し、情報の検索および分析が困難になります。グリッドウィジェットでの最良事例は以下のとおりです。
数百万行の大きさのデータテーブルを作成することは避けてください。
データ行をアクセス可能な方法で表示するため、適切な最小および最大行高さを設定します。
ページ付けを使用して大きなセットを複数のページに分割し、各ページに表示する行の数をユーザーが制御できるようにします。
グリッドウィジェットの構造
1. タイトル
2. グリッドフィルタ領域
3. ヘッダー行
4. 本文行
5. 行選択チェックボックス
6. 列並べ替えボタン
キーボードのキー
キー
グリッド
ツリーグリッド
Tab
フォーカスボックスを切り替えて、フィルタ、選択チェックボックス、ヘッダー内の並べ替えボタンなど、メイングリッド要素をハイライトします。
フォーカスボックスを切り替えて、フィルタ、選択チェックボックス、ヘッダー内の並べ替えボタンなど、メイングリッド要素をハイライトします。Focus を使用してフォーカスを設定できます。
矢印キー
上、下、左、右矢印キーを使用して、フォーカスを上下左右に移動します。
右 - フォーカスがある行を展開します。
左 - フォーカスがある行を折りたたみます。
上/下 - フォーカスがある行またはセルの次/前の行またはセルに移動します。
Home
End
現在の行の最初または最後のセルにフォーカスします。
最初または最後のセルまたは行にフォーカスします。
Page Up
Page Down
現在の列または行の表示されている最初または最後のセルにフォーカスします。
現在のグリッドビューに表示されている最初または最後のセルまたは行にフォーカスします。
スペース
Enter
RowClicked イベントがトリガーされ、行選択が有効になっている場合には現在の行が選択されます。
親行を展開するか折りたたみます。
* 
アスタリスク (*) でマークされているプロパティは、動的グリッドコンフィギュレーションでサポートされています。動的コンフィギュレーションの詳細については、JSON データを使用したグリッドの設定を参照してください。
プロパティ
説明
ベースタイプ
デフォルト値
バインド
ローカライズ可能
CacheRuntimeChanges
ブラウザキャッシュ内にグリッド並べ替えオプションを保存します。これはユーザーが別のページまたはマッシュアップに移動した場合でも永続します。マッシュアップに複数のグリッドが表示されている場合、ウィジェット ID を使用して各グリッドの変更がキャッシュされます。
BOOLEAN
True
該当なし
N
ClearFilteredSelection
グリッドデータをフィルタまたは並べ替えするときに行の選択を保持するかどうかを制御します。選択されている行がグリッドビューに表示されていない場合に選択を解除するには、このプロパティを有効にします。
* 
このプロパティはシンプルなフィルタボックスにのみ影響し、チップベースのデータフィルタやページ付けなど、データが格納されている外部ウィジェットには適用されません。
BOOLEAN
該当なし
該当なし
N
Data
グリッドをランタイムで表示したときに表示されるインフォテーブルデータソース。
INFOTABLE
該当なし
入力
N
ChildData
ツリーノードが展開されたときに動的にロードされる子ノードのデータソースを定義するインフォテーブル。ツリーグリッドのみ。
Infotable
該当なし
Y
N
ChildDataServiceEvent
ツリーグリッドでノードを展開する際に、ChildData プロパティにバインドされているサービスの ServiceInvokeCompleted イベントをトリガーします。
BOOLEAN
False
N
N
DoubleClicked
すべての選択モード (「なし」「単一」「複数」) でウィジェットをダブルクリックしたときにトリガーされるイベント。このイベントを使用して、マッシュアップ内のその他のサービスまたは関数を実行できます。このプロパティがサービスにバインドされている場合、デフォルトのブラウザテキスト選択動作は適用されません。
イベント
該当なし
Y
N
ParentIDFieldName*
各子の親 ID が含まれているツリーグリッドデータのインフォテーブル列を指定します。この ID は階層ツリー構造を作成するときに使用されます。ツリーグリッドのみ。
STRING
parentId
Y
N
HasChildrenFieldName*
行に子データがあるかどうかを示すインフォテーブル列の名前を指定します。
行に子がないことを示すには、‘0’0‘false’false、空の文字列、または undefined のいずれかを入力します。
その他の値はすべて、その行に子があることを意味します。ツリーグリッドのみ。
STRING
hasChildren
N
N
IncludeRowExpansionParents*
子行を選択または展開する際に、プリロードされたクライアント側データに含まれていない親行を含めるかどうかを指定します。True に設定すると、親行が子行とともに読み込まれ、階層が維持されます。ツリーグリッドのみ。
BOOLEAN
False
N
Y
ExpandableRows
展開可能なツリーノードの ID が含まれているインフォテーブル。グリッド行を展開可能にするには、行 ID 列のみが必要です。AlwaysExpanded を選択した場合、このデータは無視され、すべての行が展開されます。ツリーグリッドのみ。
Infotable
該当なし
Y
N
AlwaysExpanded*
グリッド上のすべてのツリーノードを展開します。
PreserveRowExpansion プロパティを使用するには、このプロパティを False に設定します。ツリーグリッドのみ。
BOOLEAN
False
N
N
ExpandCollapseAll*
グリッド上のすべてのツリーノードの展開と折りたたみを行う制御を追加します。ツリーグリッドのみ。
* 
行を展開したときと折りたたんだときに選択行が保持されます。
BOOLEAN
False
N
N
PreserveRowExpansion*
グリッドが再表示されたときに、展開されている行を保持します。
AlwaysExpanded が true の場合、プリロードされているすべての行が展開されます。グリッドビューを変更したときやページ間を移動したときに展開されている行を保持するには、CacheRuntimeChanges プロパティを設定する必要があります。ツリーグリッドのみ。
BOOLEAN
False
N
N
ExpandCollapseIcon*
データが ChildData プロパティにバインドされていない場合に、グリッド上のツリーノードの展開と折りたたみに使用するアイコンのタイプを制御します。ツリーグリッドのみ。サポートされているオプション: 「キャレット」「矢印」「プラス/マイナス」
STRING
キャレット
N
N
ExpandLoadedRows
グリッドが開いたときに、プリロードされているすべてのデータを自動的に展開します。PreserveRowExpansion プロパティを使用するには、このプロパティがオフになっていなければなりません。ツリーグリッドのみ。
BOOLEAN
False
Y
N
SelectFocusedItem*
true の場合、アイテムの選択にフォーカスボックスが使用されます。false の場合、フォーカスがある状態と選択した状態は別個に設定されます。ツリーグリッドのみ。
BOOLEAN
False
N
N
SelectParentOnly
親が選択されたときの子ノードの自動選択を無効にします。ツリーグリッドのみ。
BOOLEAN
N
N
FocusNavigationMode*
フォーカスが切り替わったときに最初にフォーカスするエレメントを制御します。「最初に行」、「最初にセル」、「セルのみ」の間で切り替えることができます。ツリーグリッドのみ。
STRING
最初に行
N
N
PrimaryColumnFixedSize*
プライマリ列のサイズ変更を無効にし、固定サイズに設定します。ツリーグリッドのみ。ResizeColumns が true の場合、このプロパティは無視されます。
BOOLEAN
False
N
N
IDPathSeparator*
ID パスの区切り文字を指定できます。
パスセパレータ文字は、ツリーグリッドで、グリッドによって動的にロードされているがクライアント側ではロードされていない行を選択するために使用します。ツリーグリッドのみ。
STRING
:;
N
N
AllowDisabledNodes
ツリーグリッド上のノードを無効にできます。
BOOLEAN
False
N
N
DisableChildNodes
無効になっている親ノードの子行を無効にします。
BOOLEAN
False
N
N
DisabledStateField
ツリーグリッドの各行に無効状態を設定するときに使用するインフォテーブル列を指定します。
INFOTABLE
該当なし
N
N
LegacyConfiguration
ウィジェットのプロパティではなくコンフィギュレーション文字列を使用してグリッドを動的に設定できるバインド可能なプロパティ。このプロパティは、グリッド (アドバンス) ウィジェットからの移行をサポートするために使用します。新しいコンフィギュレーションを追加するには、代わりに JSON コンフィギュレーションプロパティを使用します。
STRING
該当なし
Y
N
ResetButtonClicked
「リセット」ボタンをクリックしたときにトリガーされるバインド可能なイベント。
イベント
該当なし
Y
N
ColumnsMenuOptions*
ランタイムで列コンフィギュレーションメニュー内に表示されるオプションを制御します。メニューを非表示にするには、「なし」を選択します。
「なし」 - メニューボタンを非表示にします。
「表示」 - 列の表示を制御するためのチェックボックスを各列名の横に表示します。
「順序」 - 列の順序を変更するためのドラッグアイコンが各列名の横に表示されます。
「表示と順序」 - 前のオプションの両方を表示します。
STRING
「None」
いいえ
N
ColumnsMenuVisibleItems*
ランタイムで列コンフィギュレーションメニューを開くと最初に表示されるアイテムの数を設定します。このプロパティを使用して、メニューの高さを制限します。追加の列にはスクロールバーが表示されます。
NUMBER
6
いいえ
N
DefaultSelectedRows*
グリッドがロードされたときに事前に選択する行の番号を指定します。1-10 などの数値範囲や 2, 4, 5 などのコンマ区切りリストを入力できます。
STRING
該当なし
入力
N
IsEditable*
ランタイムでグリッドデータを編集できるようにします。デフォルトでは、グリッド全体に編集モードが適用されている場合、グリッドデータは自動的に保存されます。
BOOLEAN
False
入力/出力
N
EditLevel*
ランタイムでグリッドデータを編集する方法を制御します。一度に編集してすべての変更内容を保存するには「グリッド全体」を選択し、1 行ずつ編集して変更内容を保存するには「単一行」を選択し、1 つのセルずつ編集して変更内容を保存するには「単一セル」を選択します。
STRING
単一セル
いいえ
N
EditButton*
編集のオン/オフを切り替えるための編集制御をグリッドツールバーに表示します。
BOOLEAN
False
いいえ
N
RowAddButton*
「追加」ボタンをグリッドツールバーに表示します。このボタンをクリックすることで、フォームを使用して新しい行をグリッドに追加できます。
BOOLEAN
False
いいえ
N
RowDeleteButton*
選択した行を削除するためのボタンをグリッドツールバーに表示します。
BOOLEAN
False
いいえ
N
ConfirmDelete
行削除ボタンを確認関数にバインドできるバインド可能なサービス。
サービス
該当なし
入力
N
DeleteRowClicked
グリッドツールバーの行削除ボタンをクリックしたときにトリガーされるイベント。
イベント
該当なし
出力
N
RowEditFormTitle*
行編集フォームに表示するタイトルを指定します。タイトルを非表示にして、フォームのその領域を使用するには、このダイアログボックスを空のままにします。
STRING
該当なし
入力
Y
EditControlVisibility*
グリッド上に編集制御を表示するタイミングを指定します。サポートされているオプションは、「マウスポインタを合わせたとき、またはフォーカス時」「常時」「なし」です。
STRING
マウスポインタを合わせたとき、またはフォーカス時
入力
N
EditControlType*
グリッドの編集に使用する制御エレメントを設定します。使用可能なオプションは、「アイコン」または「リンク」です。アイコンを選択するか、EditControlIcon および EditControlLabel プロパティを使用してリンクテキストを設定できます。
STRING
リンク
いいえ
N
EditControlLabel*
EditControlType「リンク」に設定されている場合の編集制御のラベルを設定します。
STRING
編集
入力
Y
EditControlIcon*
EditControlType「アイコン」に設定されている場合に編集制御に表示するアイコン。
IMAGE
該当なし
いいえ
N
EditCellStarted
グリッドのセルの編集を開始するとトリガーされるイベント。
イベント
該当なし
出力
N
EditCellCompleted
グリッドのセルの編集を終了するとトリガーされるイベント。
イベント
該当なし
出力
N
EditRowStarted
グリッドの行の編集を開始するとトリガーされるイベント。
イベント
該当なし
出力
N
EditRowCompleted
グリッドの行の編集を終了するとトリガーされるイベント。
イベント
該当なし
出力
N
EditCanceled
「キャンセル」ボタンをクリックしたときにトリガーされるイベント。
イベント
該当なし
出力
N
Cancel
グリッドへの現在の編集を保存せずにキャンセルする、バインド可能なデータサービス。
サービス
該当なし
入力
N
EditStarted
「編集」ボタンをクリックするとトリガーされるイベント。
イベント
該当なし
出力
N
EditCompleted
編集を行った後に「保存」ボタンをクリックするとトリガーされるイベント。
イベント
該当なし
出力
N
EditedData
グリッドで編集されたアイテムが含まれているインフォテーブル。
INFOTABLE
該当なし
出力
N
DeletedData
グリッドで削除されたアイテムが含まれているインフォテーブル。サーバーからデータを削除するには、インフォテーブルをカスタムデータサービスにバインドします。
INFOTABLE
該当なし
出力
N
HighlightDraftState
セルレベルで編集するときに、保存されていない変更があるセルを異なる色でハイライトします。
BOOLEAN
False
いいえ
N
HighlightNewRows
ランタイムでグリッドに追加された新規行をハイライトします。
BOOLEAN
False
N
N
ShowFilter
グリッドにフィルタボックスを表示します。
BOOLEAN
False
Y
N
Filter
グリッドが並べ替えまたはフィルタされたときにトリガーされるイベント。
イベント
該当なし
該当なし
N
FilterLabel*
フィルタボックスのラベルを設定します。
STRING
該当なし
入力
Y
FilterString*
シンプルなフィルタボックスのフィルタ文字列。
STRING
該当なし
入力/出力
N
HeaderVerticalAlignment
ヘッダー行内のコンテンツの垂直方向の整列を制御します。
STRING
該当なし
N
HideHeaderRow*
ヘッダー行を非表示にします。
BOOLEAN
False
入力
N
IDFieldName*
グリッド上の各行のプライマリキーまたは ID を含むインフォテーブル列を選択します。
STRING
id
該当なし
N
Label*
グリッドラベルのテキストを指定します。
STRING
グリッドタイトル
入力
Y
LabelType*
グリッドラベルのタイプを設定します。
STRING
サブヘッダー
該当なし
N
LastClickedRow
グリッド内の最後にクリックした行のデータを含むインフォテーブル。
INFOTABLE
該当なし
該当なし
N
LinkClicked
グリッドセル内のハイパーリンクがクリックされたときにトリガーするイベント。
イベント
該当なし
Y
N
ClickedLinkData
ハイパーリンクの行データが含まれているインフォテーブル。
Infotable
該当なし
Y
N
ClickedLinkColumn
最後にクリックされたハイパーリンクが含まれている列の名前を返します。このプロパティは、グリッドにハイパーリンク付きの列が複数含まれている場合に使用できます。
STRING
該当なし
Y
N
MaxHeaderHeight
グリッドヘッダーの最大高さ (ピクセル)。
NUMBER
自動
入力
N
MaxRowHeight
グリッド上の行の最大高さをピクセル単位で指定します。デフォルトでは、高さの値は各行のコンテンツに基づいて設定されます
NUMBER
自動
入力
N
MinRowHeight
グリッド上の行の最小高さをピクセル単位で指定します
NUMBER
48
入力
N
QueryFilter
グリッドデータに適用するフィルタクエリーを含むバインド可能なプロパティ。このプロパティをデータフィルタウィジェットとデータサービスにバインドすることでグリッド上のデータをフィルタできます。
QUERY
該当なし
入力/出力
N
Reset
ランタイムにグリッドウィジェットをその初期コンフィギュレーションにリセットできるバインド可能なサービス。
サービス
該当なし
該当なし
N
RowClicked
グリッド内の行がクリックされたときにトリガーされるイベント。
イベント
該当なし
該当なし
N
RowFormat
ダイアログボックスが開き、グリッド行に適用する状態定義を選択できます。ウィジェットコンフィギュレーションダイアログボックスで列に状態フォーマットを適用することで、セルのこの状態フォーマットをオーバーライドできます。
状態定義
該当なし
該当なし
N
RowSelection*
ユーザーが同時に選択可能なグリッド上のデータ行の数を制御します。次のオプションがあります。
「なし」 (デフォルト)、「単一」「複数」
STRING
「None」
入力
N
RowSelected
グリッド上の 1 つ以上の行が選択されたときに True を返します。たとえば、このプロパティを使用して、1 つ以上の行が選択されたときにツールバーにカスタム操作を表示できます。
BOOLEAN
False
Y
N
RowsVerticalAlignment
行内のコンテンツの垂直方向の整列を制御します。
STRING
該当なし
N
SelectedRows
グリッド上の選択したデータ行を設定または取得できるインフォテーブルプロパティ。このプロパティは、ページ付けされているグリッド内のページの間を移動するとき、選択行のデータを維持しません。選択行をすべてのページから渡すには、代わりに SelectedRowsIDs プロパティを使用します。
INFOTABLE
該当なし
入力/出力
N
SelectedRowsChanged
選択行が変更されたときにトリガーされるイベント。
イベント
該当なし
該当なし
N
SelectedRowsChangedCallback*
選択行が手動またはデータサービスを使用して変更された場合に SelectedRowsChanged イベントをトリガーします。False に設定した場合、行選択が手動で変更された場合にのみこのイベントがトリガーされます。
BOOLEAN
True
該当なし
SelectedRowsIDs
グリッド上で選択されているすべての行の IDFieldName 値が含まれているインフォテーブル。グリッドデータがページ付けされている場合、このプロパティはすべてのページから選択された ID 値を返します。このプロパティを使用して、ページが切り替えられたときに選択行を保持できます。
* 
ウィジェットがツリーグリッドとして設定されている場合、このプロパティはサポートされません。
Infotable
該当なし
Y
N
SelectionCheckBoxHeaderAlignment
ヘッダー行における選択チェックボックスの垂直方向の整列を制御します。
STRING
該当なし
N
SelectionCheckboxRowAlignment
行の選択列におけるチェックボックスの垂直方向の整列を制御します。
STRING
該当なし
N
ShowValidationSuccess*
入力したデータが正しく検証されたときに、成功のメッセージを表示します。
BOOLEAN
False
いいえ
N
ValidationSuccessIcon*
成功メッセージの横に表示されるアイコン。
メディアピッカー
成功アイコン
いいえ
N
ShowValidationFailure*
入力したデータが検証に失敗したときに、失敗のメッセージを表示します。
BOOLEAN
False
いいえ
N
ValidationFailureIcon*
失敗メッセージの横に表示されるアイコン。
メディアピッカー
情報アイコン
いいえ
N
ShowValidationCritera*
グリッド上でセルを編集しているときに、必須の入力パターンに関するヒントメッセージを表示します。
BOOLEAN
False
いいえ
N
ValidationCriteriaIcon*
検証基準のヒントメッセージの横に表示されるアイコン。
メディアピッカー
情報アイコン
いいえ
N
ShowFooter*
グリッドにフッター領域を追加します。
BOOLEAN
False
いいえ
N
ShowHeaderRowInFooter*
ShowFooter が True に設定されている場合にグリッドのフッター内にヘッダー行を表示します。
BOOLEAN
False
いいえ
N
FooterData*
グリッドのフッターのコンフィギュレーションデータが含まれているインフォテーブル。
INFOTABLE
該当なし
入力
N
ShowRowNumbers*
グリッド上の別個の列に行番号を表示します。
BOOLEAN
False
該当なし
N
SingleLineHeader*
ヘッダー行のテキストを 1 行に表示します。使用可能なスペースを超えるとテキストは切り捨てられます。デフォルトでは、ヘッダーテキストは複数行にまたがって表示されます。
BOOLEAN
False
入力
N
SingleLineRows*
各行のコンテンツを 1 行に表示します。1 行にコンテンツ全体が収まらない場合、省略記号が表示されます。デフォルトでは、コンテンツは複数行にまたがって表示されます。
* 
このプロパティは HTML 形式のセルには適用されません。
BOOLEAN
False
入力
N
SortSelectionColumn*
チェックボックス選択列に並べ替えボタンを追加します。これを使用して、選択されているかどうかに基づいてデータ行を並べ替えることができます。
BOOLEAN
False
該当なし
N
TabSequence
Tab キーを押したときの、ウィジェットのシーケンス番号。
NUMBER
0
該当なし
N
ToolbarActionsData
グリッドツールバーに表示するカスタム操作を定義するインフォテーブル。サービスをこのプロパティにバインドすると、各カスタム操作用の追加のプロパティが「プロパティ」パネルにさらに追加されます。
Infotable
Y
N
ToolbarActionsPosition
グリッド上の編集ボタン、追加ボタン、削除ボタンを基準にして、ツールバーのカスタム操作の位置を制御します。オプション: 「なし」「前」「後」
* 
操作を非表示にするには、「なし」を選択します。
STRING
N
これは役に立ちましたか?