グリッドコラム / グリッドコラム

デフォルトでは、 MainGrid と SubGrid は、アクティブなDataverseビューが返す任意の列をレンダリングします。 GridColumn コンポーネントは明示的に制御できます。1つ GridColumn 以上の子が宣言された場合、グリッドは宣言された順序でそれらの列 のみ をレンダリングし、サーバー側の投影は宣言された集合を正確に取得するように書き換えます。これを使って、特定のページで重要な列に絞り込んだり、並べ替えたり、幅やアラインメントをカスタマイズしたり、セルごとのテンプレートを提供したり、基礎ビューに含まれないサーフェスカラムを提供したりできます。Dataverseビュー自体を編集せずに。

ライブデモ

contactテーブルの上で、三人の普通のGridColumn子供たちと混ざり合うGridTemplateColumnのMainGrid。最初のセルは合成で、生のfirstname+lastname値をDependsOnで投影に引き込んだイニシャルアバターと太字の名前で構成されています。残りの3つは、バウンドされた列にセルごとのChildContentテンプレートを示しています:mailto:リンク、インラインアイコン付きの電話番号、そしてしきい値比較のために生GetValueOrDefault<T>()のIntValueを読み取る色分けされた年齢バッジです。歯車アイコンをクリックして「Editable」をオンにすると、テンプレート列のEditChildContentが動作します。フルネームセルはアバターのレンダリングから、並んで並TextEditべた2つのエディタに切り替わり、それぞれfirstname+lastnameに割り当てられます。

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

ページサイズ

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

基本的な使用法

GridColumn部品をグリッドの下に置くGridColumnsラッパーの中に落とします。宣言された列名はFetchXMLの<attribute>投影を上書きします — サーバーはアクティブなビューの列選択に含まれていなくても宣言済みの列を取得します。宣言モードではTableNameパラメータは任意で、省略するとグリッド自身のTableNameが使われます(すべての列で繰り返す必要はありません)。

React
Blazor

置き換えるものであって、添加するものではありません

任意の GridColumn 子を宣言するとグリッドは 置換モードに切り替わります。宣言された列はレンダリング済みの列セット全体と、取得済みの列セット全体です。ここで宣言されていないビュー列は、レンダリングとサーバーの投影の両方から削除されます。ほとんどのビューカラムを調整して済ませたいなら、ラッパーを完全に外すか、 CustomViewDefinitionsでカスタムビューを作成するのが良いでしょう。

必要なパラメータ

各 GridColumn 宣言は以下の内容を含みます:

  • ColumnName — 必須。投影する列の論理的な名前です。エイリアス付きリンクエンティティカラム(primarycontactid.emailaddress1)のドット表記をサポートしています。エイリアスはアクティブなビューのFetchXMLに <link-entity> としてすでに存在している必要があります。
  • TableName — 任意。この列を記述するメタデータを持つテーブルの論理名。省略するとグリッドの4 TableName に戻り、シングルテーブルグリッドで消費者のマークアップを簡潔に保つのに役立ちます。

列幅

Widthを使ってビューの保存された幅を上書きしてください。ピクセル("150px")、パーセンテージ("20%")、または"auto"など、あらゆるCSS長を受け入れます。明示的な幅がない場合、グリッドはメタデータ由来のデフォルトとテーブルの自然分布に戻ってしまいます。

React
Blazor

アライメント

ヘッダーセルとボディセルの両方の水平配置を上書きするために Align を使います。数値およびマネーの列はメタデータ駆動のフォールバックによりデフォルトで Align.End (右揃え)に設定され、ブール列はデフォルトで Align.Centerとなります。デフォルトでないアラインメントをしたい時やカスタムテンプレートセルを一貫してアラインしたい時に明示的に設定してください。

React
Blazor

リンクされたエンティティカラム

エイリアス付きリンクエンティティカラムは、ビューのFetchXMLがエイリアス化する方法にドット表記を用いています。エイリアスはアクティブビューですでに<link-entity>として定義されている必要があります。エイリアスが指すソーステーブルにTableName設定し、メタデータの解析が正しいエンティティに届くようにします。サーバーはこれらの列を親テーブルに限定したローカライズされた表示名(例:「Email (Primary Contact)」)で返します。クライアント側での人間化は不要です。

React
Blazor

セルごとのテンプレート

各セルをカスタムマークアップでレンダリングする ChildContent を提供してください。テンプレートは GridRowContext を受け取ります — その PrimaryRecord プロパティは行の全ての TableRecord (タイプ付きカラム値、フォーマット済みの値、権限など)を公開します。条件付き書式(閾値より赤い文字)、アイコン、バッジ、リンク、または行の記録から構築できるあらゆるものに役立ちます。

React
Blazor

サブグリッドにおける親レコード

グリッドがSubGridとしてマウントされると、GridRowContext.ParentRecord周囲のRecordContextのレコード(サブグリッドの親)が露出します。条件付き書式で行の列を親アカウントと比較する必要がある場合、例えば親アカウントと一致しないindustrycode連絡先をハイライトしたり、親アカウントの所有者の行にラベルを付けたりするなど、ChildContentテンプレート内で活用しましょう。親レコードがないスタンドアロンMainGridでnull。

React
Blazor

Reactパリティ

React側は cellRendererの parentRecord プロペラ(CellRendererProps.parentRecord)と同じ表面を使います。

グリッドテンプレートカラム

GridTemplateColumn列が単一のDataverse列にマッピングされていない場合に使う — 複数の生値を1セルにまとめたり、複数のフィールドをキーにしたステータスバッジを表示したり、データ依存なしの純粋な装飾アクションセルを発行したりします。GridColumnとは異なり、テンプレートの列にはColumnNameがなく、レンダラーがDependsOnで読み取る列を宣言し、フレームワークがそれらをFetchXML投影に統合するため、テンプレートを実行するとデータがctx.Row.PrimaryRecordに入ります。ChildContentには行、オプションのSubGrid親、宣言した列名でキーされた事前構築されたDependsOnMetadataルックアップを含むGridTemplateColumnContext(Context="ctx"属性で名前を付ける)を受け取ります。

React
Blazor

テンプレートカラムとグリッドカラムのChildContent

GridColumn ChildContent それでもバウンドされた列をカスタマイズできます — ソート、編集、ディスパッチ、列ヘッダーはすべて単一の ColumnNameからキー化されます。単一の基礎となるカラム(複合セル、装飾アクションセル、複数のフィールドを組み合わせたステータスバッジ)がない場合にのみ GridTemplateColumn を選びましょう。両者を混同しても問題ありません。グリッドの列セット上で宣言された順序で交互に使えます。

装飾列(データ依存なし)

セルがインラインボタンやアイコンのような純粋な装飾コンテンツを表示する場合は、完全にスキ DependsOn ップしてください。フレームワークは依然として、レンダリングされたテーブルの正しい位置に柱を取り付けています。その列のサーバー投影には何も追加されません。

React
Blazor

インライン編集テンプレート

GridTemplateColumnの読み取りモードChildContentとEditChildContentを組み合わせると、グリッドの編集可能トグルがオンの状態で列を編集可能にします。編集テンプレートにはGridTemplateColumnEditContextが与えられます — 読み取りテンプレートと同じ行コンテキスト(editCtx.Row.PrimaryRecord、SubGridのオプションeditCtx.Row.ParentRecord、editCtx.DependsOnMetadataルックアップ)に加え、命令型editCtx.SetValue(columnName, value)ヘルパーも含まれます。

EditChildContent グリッドが編集可能(グリッド上でAllowEdit="true" 、かつユーザーがツールバーの Gearメニューで編集可能 スイッチを入れている場合)、行が保留削除でなく、カラム自体が編集テンプレートとして宣言されている場合に発生します。編集モードでも読み取り専用のまま EditChildContent しない装飾テンプレートの列は、常に同じボタンを描画すべきアクション列に便利です。

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

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

React
Blazor

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

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

React
Blazor

命令型経路での検証

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

サブグリッドにおいて

MainGridに適用されることはすべて同じように動作SubGrid。宣言済みの列とButtonsレンダリングフラグメント内のツールバーボタンを組み合わせることで、親レコードの関連コレクションに限定した集中したインライン編集体験を提供し、セルのテンプレート@@context.ParentRecordと組み合わせてサブグリッドの親を基にした条件付きフォーマットを活用しましょう。

React
Blazor

パラメータ参照

パラメータ
概要
ColumnName
必須。列の論理的な名称は;エイリアス化されたリンクされたエンティティ列のドット表記をサポートしています。
TableName
任意。この列を記述するメタデータを持つテーブルの論理名。省略するとグリッドの TableName を引き継ぎます。
Width
列の幅に対して任意のCSS長。
Align
オプションで水平アライメントオーバーライド(Align.Start、 Align.Center、 Align.End)。省略するとメタデータ駆動のデフォルトに戻る。
Title
オプションのヘッダーラベルオーバーライド。カラムのローカル表示名に戻る。
HeaderTooltip
オプションのヘッダーツールチップ — 計算された列やエイリアス化された列の説明に役立ちます。(TemplateColumnの継承されたTooltipブールパラメータとの大文字に非依存な衝突を避けるために命名されました。)
Visible
任意。 false 、他の宣言された列が存在しても、レンダリングされたテーブルやサーバー投影から列を抑制します。デフォルトは trueです。
IsDefaultSortColumn / InitialSortDirection
任意。宣言済みの列をグリッドの初期ソートとしてマークします。ソート方向はデフォルトで上昇方向になります。
ChildContent
任意のセルごとのテンプレート受信 GridRowContext。提供された各ボディセル内でレンダリングされます。 @@context.PrimaryRecord から行にアクセスし、(SubGridでは)親 @@context.ParentRecordでアクセスできます。
パラメータ: ColumnName
概要: 必須。列の論理的な名称は;エイリアス化されたリンクされたエンティティ列のドット表記をサポートしています。
パラメータ: TableName
概要: 任意。この列を記述するメタデータを持つテーブルの論理名。省略するとグリッドの TableName を引き継ぎます。
パラメータ: Width
概要: 列の幅に対して任意のCSS長。
パラメータ: Align
概要: オプションで水平アライメントオーバーライド(Align.Start、 Align.Center、 Align.End)。省略するとメタデータ駆動のデフォルトに戻る。
パラメータ: Title
概要: オプションのヘッダーラベルオーバーライド。カラムのローカル表示名に戻る。
パラメータ: HeaderTooltip
概要: オプションのヘッダーツールチップ — 計算された列やエイリアス化された列の説明に役立ちます。(TemplateColumnの継承されたTooltipブールパラメータとの大文字に非依存な衝突を避けるために命名されました。)
パラメータ: Visible
概要: 任意。 false 、他の宣言された列が存在しても、レンダリングされたテーブルやサーバー投影から列を抑制します。デフォルトは trueです。
パラメータ: IsDefaultSortColumn / InitialSortDirection
概要: 任意。宣言済みの列をグリッドの初期ソートとしてマークします。ソート方向はデフォルトで上昇方向になります。
パラメータ: ChildContent
概要: 任意のセルごとのテンプレート受信 GridRowContext。提供された各ボディセル内でレンダリングされます。 @@context.PrimaryRecord から行にアクセスし、(SubGridでは)親 @@context.ParentRecordでアクセスできます。

GridTemplateColumnパラメータ

パラメータ
概要
Id
任意の安定識別子。省略すると、フレームワークはテンプレート列の位置に基づいて自動的に1つの __template-{index} を生成します。宣言が動的に並べ替えられる場合は、明確なIDを渡してください。
Title
必須ヘッダーラベル。デフォルトを導き出せるバウンドされた列メタデータもありません。
DependsOn
任意。論理Dataverse列名は、レンダラーが行から読み取るものです。フレームワークはこれらをFetchXML投影に統合し、データが ctx.Row.PrimaryRecordに届くようにします。装飾用のセルは省略/空。
SortBy
任意。ヘッダーをクリックしたときに並べ替える論理カラム名。省略=ヘッダーはソートできません。
Width
列の幅に対して任意のCSS長。
Align
オプションで水平アライメントオーバーライド。デフォルトは Align.Start (基礎となるカラムタイプがないためメタデータ駆動のデフォルトはありません)。
Tooltip
オプションのヘッダーツールチップテキスト。
Visible
任意。 false はレンダリングされたテーブルから列を抑制し、サーバー投影から DependsOn エントリを削除します。デフォルトは trueです。
ChildContent
細胞ごとのテンプレート受信 GridTemplateColumnContextが必須です。 ctx.Row.PrimaryRecord で行を読み込み(SubGridでは ctx.Row.ParentRecordで親を読み込みます)、レンダラーが必要な場合は ctx.DependsOnMetadata[name] を列ごとのメタデータとして使います。
EditChildContent
編集モードテンプレートの受信 GridTemplateColumnEditContextグリッドがインライン編集モードで行が可変なときに ChildContent の代わりに呼び出します。リードテンプレートと同じ行コンテキストに加え、命令型書き込み用の editCtx.SetValue(name, value) も使います。2つのオーサリングパターンについては、上記の インライン編集テンプレート を参照してください。
パラメータ: Id
概要: 任意の安定識別子。省略すると、フレームワークはテンプレート列の位置に基づいて自動的に1つの __template-{index} を生成します。宣言が動的に並べ替えられる場合は、明確なIDを渡してください。
パラメータ: Title
概要: 必須ヘッダーラベル。デフォルトを導き出せるバウンドされた列メタデータもありません。
パラメータ: DependsOn
概要: 任意。論理Dataverse列名は、レンダラーが行から読み取るものです。フレームワークはこれらをFetchXML投影に統合し、データが ctx.Row.PrimaryRecordに届くようにします。装飾用のセルは省略/空。
パラメータ: SortBy
概要: 任意。ヘッダーをクリックしたときに並べ替える論理カラム名。省略=ヘッダーはソートできません。
パラメータ: Width
概要: 列の幅に対して任意のCSS長。
パラメータ: Align
概要: オプションで水平アライメントオーバーライド。デフォルトは Align.Start (基礎となるカラムタイプがないためメタデータ駆動のデフォルトはありません)。
パラメータ: Tooltip
概要: オプションのヘッダーツールチップテキスト。
パラメータ: Visible
概要: 任意。 false はレンダリングされたテーブルから列を抑制し、サーバー投影から DependsOn エントリを削除します。デフォルトは trueです。
パラメータ: ChildContent
概要: 細胞ごとのテンプレート受信 GridTemplateColumnContextが必須です。 ctx.Row.PrimaryRecord で行を読み込み(SubGridでは ctx.Row.ParentRecordで親を読み込みます)、レンダラーが必要な場合は ctx.DependsOnMetadata[name] を列ごとのメタデータとして使います。
パラメータ: EditChildContent
概要: 編集モードテンプレートの受信 GridTemplateColumnEditContextグリッドがインライン編集モードで行が可変なときに ChildContent の代わりに呼び出します。リードテンプレートと同じ行コンテキストに加え、命令型書き込み用の editCtx.SetValue(name, value) も使います。2つのオーサリングパターンについては、上記の インライン編集テンプレート を参照してください。