グリッド編集

MainGrid / SubGridAllowEdit="true"を設定すると、ギアメニューのオーバーフローに「編集可能」とラベル付けされたトグルが表示されます。オンにすると、セルレンダラーが上書きされていないすべての宣言済みカラムが切り替わります。これはそのカラムのDataverseメタデータから自動送信され、GridTemplateColumnEditChildContentが読み取りモードChildContentから引き継ぎます。編集はグリッドのトランザクションバッファに保留中の行の変更として蓄積され、ユーザーが保存した場合にのみDataverseに到達します。

ライブデモ

contactテーブルの上でAllowEdit="true"MainGrid。ツールバーのオーバーフローにある歯車アイコンをクリックして、編集可能をオンにしてください。フルネーム欄は、イニシャルアバターリードテンプレートを、ユーザー入力をfirstname+lastnameに分割するカスタムシングルフィールドエディターに置き換えます。シンプルなEmail、Phone、Age、Accountの各列は、それぞれのメタデータタイプに合ったエディタで点灯します(文字列はTextEdit、整数はNumberEdit、顧客参照はLookupEdit)。列ごとの配線は一切ありません。

Reactの例
ブレイザーの例
誰でも下のグリッドで連絡先を確認できます。ログインして、自分の連絡先を作成、閲覧、更新してください。
セーブ リフレッシュ

ページサイズ

102050100
Editable
フルネーム
記録は見つかりませんでした。
React TypeScript
Razor

編集の有効化

グリッド上に AllowEdit="true" セットしてください。編集はグリッドごとにオプトイン制で、トグルはパラメータが設定された時のみ表示され、トグル自体は少なくとも1列が編集可能な場合にのみ表示されます。トグルがオフの間は、グリッドは読み取り専用ビューとして振る舞います。オンの間、セルはインラインエディタをレンダリングし、保存されていない変更は行ごとに追跡されます。

React
Blazor

なぜトグルなのか?

インライン編集は、見える各行ごとにセルのレンダリングを変更します。これは静的グリッドとは異なる読み取りの許容度です。このトグルにより、必要に応じて(値の入力やセル間のタブ移動など)編集アフォーダンスに切り替え、それ以外の時間は読みやすいアフォーダンスを保持できます。グリッドはセッションのトグル状態を記憶します。

自動編集者発送

ChildContentなしの裸<GridColumn ColumnName="..." />宣言を出すと、グリッドが編集モードの間に右のインラインエディタを自動発送します。フレームワークは列のメタデータを読み取り、エディターのサブクラスを選択します:

  • StringMemoEmailAddressPhoneUrlTextEdit (フォーマットに応じた検証付き)。
  • IntegerDecimalDoubleBigIntNumberEdit (ローカレ認識解析、メタデータからの最小/最大解析)。
  • BooleanBoolEdit (スイッチとして表示され、中央配置)。
  • PicklistChoiceEdit (オプションセット駆動のドロップダウン、ローカライズされたラベル)。
  • MultiSelectPicklistMultiSelectChoiceEdit
  • LookupCustomerOwnerLookupEdit (タイプ先行駆動で、ターゲットテーブルの許可リストを尊重)。
  • DateTimeDateOnlyDateTimeEdit
  • MoneyMoneyEdit (通貨記号の接頭辞は transactioncurrencyidから)。
  • FileImageFileEdit / ImageEdit (ドラッグドロップアップロード)。

デフォルトエディターの上書き

ChildContentGridColumnに供給して、その列の読み取りモードディスプレイと編集モードエディタの両方を操作します。ChildContent設定が完了すると、フレームワークはメタデータ駆動型エディターの自動ディスパッチをやめ、テンプレート内の任意のエディターをレンダリングし、グリッドのEditableフラグからその可視性をゲートします。標準的なエディタ(TextEditNumberEditColumnEdit)はテンプレートに自動でダーティトラッキングとカスケード行コンテキストによる検証を割り当てました。

React
Blazor

検証

各列は独自の EditContextValidatorを維持しています。標準エディタはマウント時に登録し、エラーをインライン(赤下線+セルのツールチップ)で表示します。未解決の検証エラーがある列の間は、グリッドのセーブボタンが無効になります。検証ルールは列メタデータから得られます:

  • RequiredLevel — 列が必要であり、空の値がセーブをブロックします。
  • Format 文字列カラムでは、メール、電話、URL形式が型の上に形状を強制します。
  • MinValue / MaxValue 数値列 — 範囲外の値は保存前にフラグが立てられます。
  • カスタム検証 — EditContextValidator APIを通じてフォームごとに追加ルールを登録し、クロスフィールド不変(例:「連絡先はメールアドレスまたは電話のいずれか)」などを活用します。

カスタムウィジェットの検証

ChildContent/EditChildContent内でレンダリングされたカスタム入力でBaseEditを拡張しないもの(例:生のFluentTextFieldやサードパーティのウィジェット)は、行のバリデーターに自動登録されません。もし検証が必要なら、生のウィジェットの代わりに標準エディタを使うか、ウィジェットのValueChangedコールバック内で手動で検証を実行してからeditCtx.SetValueしてください。

セーブ&キャンセル

編集は行の「保留中の更新」として蓄積されます。修正されたセルには小さな「汚れた」インジケーターが表示され、削除された行は取り消し線、保留中の作成行は新規として表示されます。グリッドのツールバーは、保留変更があるたびに保存とキャンセルボタンを表示します。セーブは一回のトランザクションパスでバッチをコミットします。キャンセルするとバッファを破棄し、各行をサーバー状態に戻します。Buttonsフラグメント内のNewRecordGridButtonDeleteRecordGridButtonと組み合わせることで、同じ編集トランザクションに行の作成と削除を追加できます。

React
Blazor

テンプレートカラム編集

GridTemplateColumnの読み取りモードChildContentEditChildContentを組み合わせれば、合成/合成カラムを編集可能にできます。編集テンプレートにはGridTemplateColumnEditContextが付与されます — 読み取りテンプレートと同じ行コンテキスト(editCtx.Row.PrimaryRecord、SubGridのオプションの editCtx.Row.ParentRecord editCtx.DependsOnMetadata)に加え、命令型editCtx.SetValue(columnName, value)ヘルパーが付随します。

EditChildContent グリッドが編集可能(AllowEdit="true" かつ 編集可能 トグルがオン)で、行が保留・削除されていない場合にのみ発動します。編集モードでも読み取り専用のままのテンプレート列 EditChildContent — 常に同じボタンを描画すべきアクション列に便利です。

パターン1 — ドロップイン標準エディタ

最も一般的なケースは、セルが複数のバウンドされた列から構成されていて、ユーザーがそれぞれ編集できるようにしたい場合です。EditChildContentの中にマッチング<TextEdit> / <NumberEdit> / <ColumnEdit>エディタを落とします — フレームワークは行のプライマリレコードとマッチングEditContextValidatorをそのスコープにカスケード化し、エディタが自己登録してダーティトラッキングと検証を行います。追加の配線は必要ありません。

React
Blazor

パターン2 — SetValue付きのカスタムウィジェット

エディターの表面がDataverseの列に1:1でマッピングされない場合は(単一の「First Last」テキストボックスで2列に解析され、複数のパーセントフィールドに結びついたスライダー、開始+終了を書くカスタム日付範囲ピッカー)、独自の入力をレンダリングし、影響を受けた各列ごとに editCtx.SetValue(columnName, value) を呼び出してください。フレームワークは書き込みを正しい AliasedTableRecord にルーティングし、 ValueChanged を発射するので、ダーティトラッキングで変更を拾います。

React
Blazor

命令型経路での検証

標準的なエディタはEditChildContent行のEditContextValidatorに自動的にレジスタに入り、フレームワークの保存前検証ゲートに参加します。editCtx.SetValueパスはそのパイプラインをバイパスします。登録された編集者から得られていない値は検証されません。カスタムウィジェットが制約を強制する必要がある場合は、SetValue呼び出す前にValueChangedコールバック内で制約を実行するか、ドロップインエディタパターンに戻してください。