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={NwindData} 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 を使用して、ボタンが表示するレコードを調整できます。

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

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

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

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

    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 のデフォルト位置は、エンド ユーザーが [行の追加] ボタンをクリックした行の下にあります。

    • grid がスクロールして、行追加 UI が自動的に完全に表示されます。

    • 行追加 UI のオーバーレイは、スクロール中もその位置を維持します。

    動作

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

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

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

    • ALT + + - 行を追加するために編集モードに入ります。
    • ESC は変更を送信せずに行追加モードを終了します。

    • TAB - 行の編集可能なセルから次のセルへフォーカスを移動、右端の編集可能なセルから [キャンセル] と [完了] ボタンへ移動します。[完了] ボタンからのナビゲーションは現在の編集行内で編集可能なセルへ移動します。

    機能の統合

    • grid のデータ ビューが変更されると、行追加の操作は停止します。エンド ユーザーが行った変更はすべて送信されます。データ ビューを変更する操作には、ソート、グループ化、フィルタリング、ページングなどが含まれますが、これらに限定されません。

    • 行追加の操作が終了すると、集計が更新されます。同じことが、ソート、フィルタリングなど、他のデータ ビューに依存する機能にも当てはまります。

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

    テキストのカスタマイズ

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

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

    スタイル設定

    行追加 UI は IgrActionStrip 編集操作のボタン、編集エディター、オーバーレイ、エンドユーザーが新しく追加された行にスクロールできるスナックバーが構成されます。これらのコンポーネントのスタイル設定には、それぞれのトピックのガイドを参照してください。

    API リファレンス

    その他のリソース

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