React マスターと詳細 Grid

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

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

    React Grid マスターと詳細の例

    構成

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

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

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

    const masterDetailTemplate = ({dataContext}:{dataContext: IgrGridMasterDetailContext}) => {
        const data = dataContext.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 メソッドも公開されています。

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

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

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

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

    既知の問題と制限

    既知の制限 説明
    カスタム詳細テンプレート内のタブ ナビゲーションは、次のフォーカスされた要素が表示ビュー ポート以外にある場合、マスター グリッドのスクロール位置を更新しない場合があります。 カスタム詳細テンプレート内のタブ ナビゲーションは、ブラウザーに残されています。
    <igc-column> 定義を含む詳細ビュー内のグリッドをテンプレート化する際に親グリッドもそれらの列をレンダリングします。 これは、ネストされたグリッドで autoGenerate=true を使用して回避できます。これらの列の要素を変更する必要がある場合、ColumnInit イベントを使用できます。
    詳細テンプレートは Excel にエクスポートされません。 詳細テンプレートにはあらゆる種類のコンテンツが含まれているため、Excel にエクスポートすることはできません。
    検索機能は、詳細テンプレートの要素をハイライト表示しません。

    API リファレンス