Premium

React Hierarchical Grid 行の追加

React Hierarchical Grid の Ignite UI for React 行追加機能を使用すると、ユーザーは別のフォームやページに移動せずに新しいデータレコードを入力して送信できます。IgrHierarchicalGrid では、インラインでの行追加と、CRUD 操作のための強力な API によってデータを操作できます。グリッドテンプレートに、編集アクションを有効にした IgrActionStrip コンポーネントを追加します。次に行へホバーして表示されたボタンを使用し、最後に ALT + + を押して行追加 UI を表示します。

React Hierarchical Grid 行の追加の例

行追加の使用

次に、データソースをバインドした IgrHierarchicalGrid を定義し、IgrHierarchicalGrid.rowEditable を true に設定します。さらに、編集アクションを有効にした IgrActionStrip コンポーネントを追加します。IgrHierarchicalGrid.addRow 入力は、行追加 UI を表示するボタンの表示状態を制御します。

<IgrHierarchicalGrid autoGenerate={false} data={singersData} id="hGrid" primaryKey="ID" rowEditable={true} ref={hierarchicalGrid1Ref}>
   <IgrActionStrip>
     <IgrGridEditingActions
        addRow={true}>
       </IgrGridEditingActions>
   </IgrActionStrip>
   <IgrColumn field="Artist" header="Artist" dataType="string" resizable={true}>
   </IgrColumn>
   <IgrColumn field="Debut" header="Debut" dataType="number" minWidth="88px" maxWidth="230px" resizable={true}>
   </IgrColumn>
   <IgrColumn field="GrammyNominations" header="Grammy Nominations" dataType="string" resizable={true}>
   </IgrColumn>
   <IgrColumn field="GrammyAwards" header="Grammy Awards" dataType="string" resizable={true}>
   </IgrColumn>
   <IgrRowIsland childDataKey="Albums" autoGenerate={false}>
       <IgrColumn field="Album" header="Album" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="LaunchDate" header="Launch Date" dataType="date" resizable={true}>
       </IgrColumn>
       <IgrColumn field="BillboardReview" header="Billboard Review" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="USBillboard200" header="US Billboard 200" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrRowIsland childDataKey="Songs" autoGenerate={false}>
           <IgrActionStrip>
                <IgrGridEditingActions addRow={true}>
                </IgrGridEditingActions>
            </IgrActionStrip>
           <IgrColumn field="Number" header="No." dataType="string" resizable={true}>
           </IgrColumn>
           <IgrColumn field="Title" header="Title" dataType="string" resizable={true}>
           </IgrColumn>
           <IgrColumn field="Released" header="Released" dataType="string" resizable={true}>
           </IgrColumn>
           <IgrColumn field="Genre" header="Genre" dataType="string" resizable={true}>
           </IgrColumn>
       </IgrRowIsland>
   </IgrRowIsland>
   <IgrRowIsland childDataKey="Tours" autoGenerate={false}>
           <IgrActionStrip>
                <IgrGridEditingActions addRow={true}>
                </IgrGridEditingActions>
            </IgrActionStrip>
       <IgrColumn field="Tour" header="Tour" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="StartedOn" header="Started on" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="Location" header="Location" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="Headliner" header="Headliner" dataType="string" resizable={true}>
       </IgrColumn>
   </IgrRowIsland>
</IgrHierarchicalGrid>

注: プライマリキーは行追加操作で必須です。

注: プライマリキーを除くすべての列は、デフォルトで行追加 UI で編集可能です。特定の列の編集を無効にする場合、IgrColumn.editable 列の入力を false に設定します。

注: [行の追加] ボタンの表示状態を制御する IgrGridEditingActions 入力では、アクションストリップのコンテキスト (型: IgrRowType) を使用して、ボタンを表示するレコードを調整できます。

BaseTransactionService は IgrHierarchicalGrid に内部的に提供され、行の状態が送信またはキャンセルされるまで保留中のセル変更を保持します。

プログラムで行の追加を開始

IgrHierarchicalGrid では、2 つの公開メソッドを使って行追加 UI をプログラムから表示できます。1 つは UI を表示する位置の基準となる行 ID を受け取り、もう 1 つはインデックスで位置を指定します。これらのメソッドを使うことで、現在のデータビュー内の任意の位置に UI を表示できます。ページ変更や、たとえばフィルターで除外された行を指定することはサポートされません。

IgrHierarchicalGrid.beginAddRowById を使用すると、2 つの異なるパブリックメソッドを使用して、プログラムで行追加 UI を生成できます。1 つは UI が生成される行を指定するための行 ID を受け入れ、もう 1 つはインデックスによって機能します。これらのメソッドを使用して、現在のデータビュー内の任意の場所に UI を生成できます。ページの変更や、たとえばフィルターで除外された行の指定はサポートされていません。

gridRef.current.beginAddRowById('ALFKI');  // Spawns the add row UI under the row with PK 'ALFKI'
gridRef.current.beginAddRowById(null);     // Spawns the add row UI as the first record

IgrHierarchicalGrid.beginAddRowByIndex メソッドも同様に機能しますが、UI が表示されるインデックスを指定する必要があります。指定可能な値の範囲は 0 からデータビューのサイズ - 1 までです。

gridRef.current.beginAddRowByIndex(10);   // Spawns the add row UI at index 10
gridRef.current.beginAddRowByIndex(0);    // Spawns the add row UI as the first record

位置

行追加 UI のデフォルト位置は、エンドユーザーが [行の追加] ボタンをクリックした行の下にあります。
IgrHierarchicalGrid がスクロールして、行追加 UI が自動的に完全に表示されます。
行追加 UI のオーバーレイは、スクロール中もその位置を維持します。

動作

行追加 UI は、エンドユーザーに一貫した編集エクスペリエンスを提供するため、行編集 UI と同じ動作をします。詳細は Hierarchical Grid 行の編集を参照してください。

行追加 UI から新しい行を追加した後、その位置や表示状態は IgrHierarchicalGrid のソート、フィルタリング、グループ化の状態によって決まります。これらの状態が適用されていない IgrHierarchicalGrid では、新しい行は末尾レコードとして表示されます。また、追加行が表示領域外にある場合は、IgrHierarchicalGrid のその位置までスクロールできるボタンを含むスナックバーが短時間表示されます。

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

ALT + + - 行を追加するために編集モードに入ります。
ESC は変更を送信せずに行追加モードを終了します。
TAB - 行の編集可能なセルから次のセルへフォーカスを移動、右端の編集可能なセルから [キャンセル] と [完了] ボタンへ移動します。[完了] ボタンからのナビゲーションは現在の編集行内で編集可能なセルへ移動します。

機能の統合

IgrHierarchicalGrid のデータビューが変更されると、行追加の操作は停止します。エンドユーザーが行った変更はすべて送信されます。データビューを変更する操作には、ソート、グループ化、フィルタリング、ページングなどが含まれますが、これらに限定されません。
行追加の操作が終了すると、集計が更新されます。同じことが、ソート、フィルタリングなど、他のデータビューに依存する機能にも当てはまります。
IgrHierarchicalGrid の UI を生成すると、エンドユーザーが [行の追加] ボタンをクリックした行に対して現在展開されている子レイアウトはすべて縮小されます。

行追加オーバーレイのカスタマイズ

テキストのカスタマイズ

行追加オーバーレイのテキストは、IgrGridBaseDirective.rowAddTextTemplate を使用してカスタマイズできます。

gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => {
    return (
        <>
            <span>Adding Row</span>
        </>
    );
}

ボタンのカスタマイズ

行編集オーバーレイのボタンは、RowEditActions テンプレートでカスタマイズできます。

スタイル設定

行追加 UI は、IgrActionStrip の編集アクションボタン、編集エディターとオーバーレイ、さらに新規追加行へスクロールするためのスナックバーで構成されています。これらのスタイル設定は、各トピックのガイドを参照してください。

API リファレンス

IgrHierarchicalGrid

その他のリソース

Hierarchical Grid 編集

コミュニティに参加して新しいアイデアをご提案ください。

React Hierarchical Grid 行の追加