React マスターと詳細 Grid

IgrGrid コンポーネントは、コンテンツを展開/縮小することで特定の行の追加の詳細を表示する詳細テンプレートの指定をサポートします。指定した場合、各レコードはマスターとして機能し、展開すると、現在のレコードのコンテキスト データを含むカスタマイズ可能な詳細テンプレートが表示されます。

このモードは、マスターと詳細スタイル データを階層構造で表示する必要がある場合に役立ちます。

React Grid マスターと詳細の例

構成

マスターと詳細モードで表示するように IgrGrid を設定するには、グリッドのテンプレートを指定する必要があります。

<IgrGrid detailTemplate={masterDetailTemplate} autoGenerate="false" data={nwindData}>

テンプレートのコンテキストはマスター レコード データであるため、マスター レコードの値を詳細テンプレートに表示できます。例:

const masterDetailTemplate = (args: IgrGridMasterDetailContext) => {
    const data = args.implicit;
    return (
        <div className="contact-container">
            <span><strong>Name:</strong> {data.ContactName}</span> <br/>
            <span><strong>Title:</strong> {data.ContactTitle}</span> <br/>
            <span><strong>Company:</strong> {data.CompanyName}</span> <br/>
        </div>
    );
}

API

展開状態を制御するための追加の API メソッドも公開されています。

• ExpandAll
• CollapseAll
• ToggleRow
• ExpandRow
• CollapseRow

キーボード ナビゲーション

• 詳細行にフォーカスがある場合:

  • 🡑 - 前の行のセルにフォーカスし、1 つ上の行へ移動します。
  • 🡓 - 次の行のセルにフォーカスし、1 つ下の行へ移動します。
  • TAB - フォーカス可能な要素がある場合、テンプレート内の次のフォーカス可能な要素にフォーカスを移動します。そうでない場合は、次のグリッド行に移動します。
  • SHIFT + TAB - 前の行にフォーカスします。

• エキスパンダーのデータ行にフォーカスがある場合:

  • ALT + 🡒 または ALT + 🡓 - 行を展開します。
  • ALT + 🡐 または ALT + 🡑 - 行を縮小します。

既知の問題と制限

API リファレンス