Premium

React Grid 行の追加

React Grid の Ignite UI for React 行追加機能を使用すると、ユーザーは別のフォームやページに移動することなく、新しいデータレコードを入力して送信できます。IgrGrid を使用すると、ユーザーはインライン行追加と CRUD 操作用の強力な API を通じてデータを操作できます。グリッドのテンプレートで編集操作が有効になっている IgrActionStrip コンポーネントを追加します。その後、行にカーソルを置き、提供されたボタンを使用します。最後に ALT + + を押して、行追加 UI を表示します。

React Grid 行の追加の例

行追加の使用

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

<IgrGrid autoGenerate={false} data= primaryKey="ProductID" rowEditable={true}>
    <IgrColumn field="ProductID" header="Product ID" dataType="number"></IgrColumn>
    <IgrColumn field="ReorderLevel" header="Reorder Level" dataType="number"></IgrColumn>
    <IgrColumn field="ProductName" header="Product Name" dataType="string"></IgrColumn>
    <IgrColumn field="UnitsInStock" header="Units In Stock" dataType="number"></IgrColumn>
    <IgrColumn field="OrderDate" header="Order Date" dataType="date"></IgrColumn>
    <IgrColumn field="Discontinued" header="Discontinued" dataType="boolean"></IgrColumn>

    <IgrActionStrip>
        <IgrGridEditingActions addRow={true}></IgrGridEditingActions>
    </IgrActionStrip>
</IgrGrid>

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

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

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

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

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

IgrGrid allows to programmatically spawn the add row UI by using two different public methods. One that accepts a row ID for specifying the row under which the UI should spawn and another that works by index. You can use these methods to spawn the UI anywhere within the current data view. Changing the page or specifying a row that is e.g. filtered out is not supported.

IgrGrid.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

BeginAddRowById を使用するには、RowID (PK) によって操作のコンテキストとして使用する行を指定する必要があります。このメソッドは、エンドユーザーが指定された行の [行の追加] アクションストリップボタンをクリックしたかのように機能し、その下に UI を生成します。最初のパラメーターに null を渡すことで、UI をグリッドの最初の行としてス生成させることもできます。

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

動作

行追加 UI は、エンドユーザーに整合性のある編集エクスペリエンスを提供するように設計されているため、行編集 UI と同じ動作をします。詳細については、Grid 行の編集のトピックを参照してください。

行追加 UI を介して新しい行が追加された後、その位置や表示状態は、IgrGrid のソート、フィルタリングおよびグループ化の状態によって決定されます。これらの状態のいずれも適用されていない IgrGrid では、最後のレコードとして表示されます。スナックバーが短時間表示され、IgrGrid が表示されていない場合にはエンドユーザーがコントロールの位置までスクロールするためのボタンが含まれています。

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

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

機能の統合

IgrGrid のデータビューが変更されると、行追加の操作は停止します。エンドユーザーが行った変更はすべて送信されます。データビューを変更する操作には、ソート、グループ化、フィルタリング、ページングなどが含まれますが、これらに限定されません。
行追加の操作が終了すると、集計が更新されます。同じことが、ソート、フィルタリングなど、他のデータビューに依存する機能にも当てはまります。

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

テキストのカスタマイズ

行追加オーバーレイのテキストのカスタマイズは、 RowAddTextTemplate を使用して可能です。

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

ボタンのカスタマイズ

行編集オーバーレイのボタンをカスタマイズするには、RowEditActions テンプレートを使用します。

React Grid 行の追加