グリッドウィジェット
インフォテーブルソースのデータを検査、表示、分析するには、グリッドウィジェットを使用します。データソース内の各インフォテーブル列がグリッドの列として表示されます。
• カスタム操作をグリッドツールバーに表示します。
• グリッドに追加された新規行をハイライトします。
• 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 行にコンテンツ全体が収まらない場合、省略記号が表示されます。デフォルトでは、コンテンツは複数行にまたがって表示されます。
| BOOLEAN | False | 入力 | N | ||
SortSelectionColumn* | チェックボックス選択列に並べ替えボタンを追加します。これを使用して、選択されているかどうかに基づいてデータ行を並べ替えることができます。 | BOOLEAN | False | 該当なし | N | ||
TabSequence | Tab キーを押したときの、ウィジェットのシーケンス番号。 | NUMBER | 0 | 該当なし | N | ||
ToolbarActionsData | グリッドツールバーに表示するカスタム操作を定義するインフォテーブル。サービスをこのプロパティにバインドすると、各カスタム操作用の追加のプロパティが「プロパティ」パネルにさらに追加されます。 | Infotable | Y | N | |||
ToolbarActionsPosition | グリッド上の編集ボタン、追加ボタン、削除ボタンを基準にして、ツールバーのカスタム操作の位置を制御します。オプション: 「なし」、「前」、「後」。
| STRING | 後 | N |