Premium

React Tree Grid 行の追加

IgrTreeGrid はインライン行追加や React CRUD 操作のための強力な API を通して便利なデータ操作方法を提供します。グリッドのテンプレートで編集アクションが有効になっている IgrActionStrip コンポーネントを追加し、ホバーして提供されたボタンを使用するか、ALT + + を押して、行追加 UI を生成するか、ALT + SHIFT + + を押して、選択した行に子を追加するための UI を生成します。

React Tree Grid 行の追加の例

行追加の使用

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

<IgrTreeGrid autoGenerate={false} primaryKey="ID" foreignKey="ParentID" rowEditable={true}>
    <IgrColumn field="Name" header="Name" dataType="string"></IgrColumn>
    <IgrColumn field="Title" header="Title" dataType="string"></IgrColumn>
    <IgrColumn field="HireDate" header="Hire Date" dataType="date"></IgrColumn>
    <IgrColumn field="OnPTO" header="On PTO" dataType="boolean"></IgrColumn>

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

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

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

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

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

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

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

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

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

位置

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

動作

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

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

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

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

機能の統合

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

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

テキストのカスタマイズ

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

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

ボタンのカスタマイズ

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

React Tree Grid 行の追加