グリッドコラム / グリッドコラム
デフォルトでは、 MainGrid と SubGrid は、アクティブなDataverseビューが返す任意の列をレンダリングします。 GridColumn コンポーネントは明示的に制御できます。1つ GridColumn 以上の子が宣言された場合、グリッドは宣言された順序でそれらの列 のみ をレンダリングし、サーバー側の投影は宣言された集合を正確に取得するように書き換えます。これを使って、特定のページで重要な列に絞り込んだり、並べ替えたり、幅やアラインメントをカスタマイズしたり、セルごとのテンプレートを提供したり、基礎ビューに含まれないサーフェスカラムを提供したりできます。Dataverseビュー自体を編集せずに。
ライブデモ contactテーブル上のMainGridで、4つの通常のGridColumn子を含むGridTemplateColumnを混ぜます。最初のセルは合成で、イニシャルアバターと、生のfirstname+lastnameの値からDependsOnで投影に引き込まれた太字の名前で構成されています。次の3つは、バウンドされた列にセルごとのテンプレートを示しています:mailto:リンク、インラインアイコン付きの電話番号、そしてGetValueOrDefault<T>()で生のDecimalValueを読み取ってしきい値比較を行う色分けされた年齢バッジです。最後の「Birthday」はテンプレートがないため、内蔵の日付セルがレンダリングします。歯車アイコンをクリックして「Editable 」をオンにすると、テンプレート列のEditChildContentが動作します。フルネームセルがアバターのレンダリングから、firstname+lastnameに割り当てられた2つの並TextEdit列のエディタに切り替わります。
Reactの例
ブレイザーの例
React TypeScript
Razor
誰でも下のグリッドで連絡先を確認できます。ログインして、自分の連絡先を作成、閲覧、更新してください。
基本的な使用法
GridColumn部品をグリッドの下に置くGridColumnsラッパーの中に落とします。宣言された列名はFetchXMLの<attribute>投影を上書きします — サーバーはアクティブなビューの列選択に含まれていなくても宣言済みの列を取得します。宣言モードではTableNameパラメータは任意で、省略するとグリッド自身のTableNameが使われます(すべての列で繰り返す必要はありません)。
React
Blazor
<MainGrid tableName="contact">
<GridColumns>
<GridColumn columnName="firstname" />
<GridColumn columnName="lastname" />
<GridColumn columnName="emailaddress1" />
</GridColumns>
</MainGrid> <MainGrid TableName="contact">
<GridColumns>
<GridColumn ColumnName="firstname" />
<GridColumn ColumnName="lastname" />
<GridColumn ColumnName="emailaddress1" />
</GridColumns>
</MainGrid> 置き換えるものであって、添加するものではありません
任意の GridColumn 子を宣言するとグリッドは 置換モード に切り替わります。宣言された列はレンダリング済みの列セット全体と、取得済みの列セット全体です。ここで宣言されていないビュー列は、レンダリングとサーバーの投影の両方から削除されます。ほとんどのビューカラムを調整して済ませたいなら、ラッパーを完全に外すか、 CustomViewDefinitionsでカスタムビューを作成するのが良いでしょう。
必要なパラメータ
各 GridColumn 宣言は以下の内容を含みます:
ColumnName — 必須。投影する列の論理的な名前です。エイリアス付きリンクエンティティカラム(primarycontactid.emailaddress1)のドット表記をサポートしています。エイリアスはアクティブなビューのFetchXMLに <link-entity> としてすでに存在している必要があります。TableName — 任意。この列を記述するメタデータを持つテーブルの論理名。省略するとグリッドの4 TableName に戻り、シングルテーブルグリッドで消費者のマークアップを簡潔に保つのに役立ちます。列幅
Widthを使ってビューの保存された幅を上書きしてください。ピクセル("150px")、パーセンテージ("20%")、または"auto"など、あらゆるCSS長を受け入れます。明示的な幅がない場合、グリッドはメタデータ由来のデフォルトとテーブルの自然分布に戻ってしまいます。
React
Blazor
<GridColumns>
<GridColumn columnName="firstname" width="150px" />
<GridColumn columnName="lastname" width="150px" />
<GridColumn columnName="emailaddress1" width="250px" />
</GridColumns> <GridColumns>
<GridColumn ColumnName="firstname" Width="150px" />
<GridColumn ColumnName="lastname" Width="150px" />
<GridColumn ColumnName="emailaddress1" Width="250px" />
</GridColumns> アライメント
ヘッダーセルとボディセルの両方の水平配置を上書きするために Align を使います。数値およびマネーの列はメタデータ駆動のフォールバックによりデフォルトで Align.End (右揃え)に設定され、ブール列はデフォルトで Align.Centerとなります。デフォルトでないアラインメントをしたい時やカスタムテンプレートセルを一貫してアラインしたい時に明示的に設定してください。
React
Blazor
{/* 数値列とマネー列はすでに
メタデータ駆動のバックアップです。セットアライメントを明示的にしてください
デフォルトでないアライメントを望んでいます。 */}
<GridColumns>
<GridColumn columnName="firstname" />
<GridColumn columnName="creditlimit" align="end" />
<GridColumn columnName="donotemail" align="center" />
</GridColumns> <!-- 数値列とマネー列はすでに
メタデータ駆動のバックアップです。Alignを明示的に設定するときに
デフォルトでないアライメントを望んでいます。 -->
<GridColumns>
<GridColumn ColumnName="firstname" />
<GridColumn ColumnName="creditlimit" Align="DataGridCellAlignment.End" />
<GridColumn ColumnName="donotemail" Align="DataGridCellAlignment.Center" />
</GridColumns> リンクされたエンティティカラム
エイリアス付きリンクエンティティカラムは、ビューのFetchXMLがエイリアス化する方法にドット表記を用いています。エイリアスはアクティブビューですでに<link-entity>として定義されている必要があります。エイリアスが指すソース テーブルにTableName設定し、メタデータの解析が正しいエンティティに届くようにします。サーバーはこれらの列を親テーブルに限定したローカライズされた表示名(例:「Email (Primary Contact)」)で返します。クライアント側での人間化は不要です。
React
Blazor
<MainGrid tableName="account">
<GridColumns>
<GridColumn columnName="name" />
{/* エイリアスされたリンクエンティティ列:ドット表記が一致します
ビューのFetchXMLエイリアス内でカラムがどのように表示されるか。
サーバーはリンクエンティティのメタデータを自動的に解決します
FetchXMLから — 別のtableNameプロップは不要です。 */}
<GridColumn columnName="primarycontactid.emailaddress1" />
</GridColumns>
</MainGrid> <MainGrid TableName="account">
<GridColumns>
<GridColumn ColumnName="name" />
<!-- エイリアスされたリンクエンティティ列:ドット表記が一致します
ビューのFetchXMLエイリアス内でカラムがどのように表示されるか。
TableNameはLINK-ENTITYのテーブルを指さささなければなりません。
メタデータは正しい主体に対して解決されます。 -->
<GridColumn ColumnName="primarycontactid.emailaddress1"
TableName="contact" />
</GridColumns>
</MainGrid> セルごとのテンプレート
各セルをカスタムマークアップでレンダリングする ChildContent を提供してください。テンプレートは GridRowContext を受け取ります — その PrimaryRecord プロパティは行の全ての TableRecord (タイプ付きカラム値、フォーマット済みの値、権限など)を公開します。条件付き書式(閾値より赤い文字)、アイコン、バッジ、リンク、または行の記録から構築できるあらゆるものに役立ちます。
React
Blazor
<GridColumns>
<GridColumn columnName="fullname" />
<GridColumn
columnName="creditlimit"
cellRenderer={({ record }) => {
// 行のTableRecord — 生の+フォーマット済みの値の両方が利用可能です。
const raw = (record.properties?.creditlimit as { value?: number })?.value;
const over = typeof raw === 'number' && raw >= 100_000;
const formatted = record.formattedValues?.creditlimit ?? '-';
return (
<span style={{ color: over ? 'var(--colorStatusDangerForeground1)' : 'inherit' }}>
{formatted}
</span>
);
}}
/>
</GridColumns> <GridColumns>
<GridColumn ColumnName="fullname" />
<GridColumn ColumnName="creditlimit">
<ChildContent>
@{
var raw = context.PrimaryRecord
.GetValueOrDefault<MoneyValue>("creditlimit")?.Value;
var over = raw is decimal d && d >= 100_000m;
}
<span style="color: @(over ? "var(--colorStatusDangerForeground1)" : "inherit")">
@(context.PrimaryRecord.FormattedValues["creditlimit"] ?? "-")
</span>
</ChildContent>
</GridColumn>
</GridColumns> セルを知る:CellTemplate
ChildContentその行を受け取り、その行はすべてのセル共有されているため、どの列をレンダリングしているか、あるいはグリッドの検索が何と一致したかを把握できません。セルが知る必要がある場合は、代わりにCellTemplateを提供します。セルはGridColumnCellContextを受け取ります:Row、セルのColumnName、MetadataとタイプされたValue、組み込みセルに表示されるDisplayValue、そしてHighlight(text)(検索が一致したテキスト、検索カラム、検索カラム、選択カラム、比較が成り立つ数値または日付カラムの値)を示します。両方が設定されている場合、ChildContentより優先されます。Reactでは、cellRendererはすでにセルのvalue、metadata、searchTextを受け取っています。テキストは<Highlighter>にsearchTextを渡し、数字やマネーの列はparseNumericSearchとmatchesNumericSearchで確認し、日付列はparseDateSearchとmatchesDateSearchで、日付の列はセルの値ではなくフォーマットされたテキストを受け取ります。日付の日付は表示されるタイムゾーンやuseLocale()の所在地によって異なるため、<HighlightFull>で値を示します。
React
Blazor
<GridColumn
columnName="emailaddress1"
cellRenderer={({ record, searchText }) => {
// グリッドの検索結果が一致したものを、内蔵セルが示すようにマークしてください。
const email = resolveColumnDisplayValue(record, 'emailaddress1') ?? '';
return (
<a href={`mailto:${email}`}>
<Highlighter text={email} searchText={searchText ?? null} />
</a>
);
}}
/> <GridColumn ColumnName="emailaddress1">
<CellTemplate Context="cell">
<!-- グリッドの検索結果が一致したものを、内蔵セルが示すようにマークしてください。 -->
<a href="mailto:@cell.DisplayValue">@cell.Highlight(cell.DisplayValue)</a>
</CellTemplate>
</GridColumn> サブグリッドにおける親レコード
グリッドがSubGridとしてマウントされると、GridRowContext.ParentRecord周囲のRecordContextのレコード(サブグリッドの親)が露出します。条件付き書式で行の列を親アカウントと比較する必要がある場合、例えば親アカウントと一致しないindustrycode連絡先をハイライトしたり、親アカウントの所有者の行にラベルを付けたりするなど、ChildContentテンプレート内で活用しましょう。親レコードがないスタンドアロンMainGridでnull。
React
Blazor
<SubGrid relationshipName="contact_customer_accounts">
<GridColumns>
<GridColumn columnName="fullname" />
<GridColumn
columnName="industrycode"
cellRenderer={({ record, parentRecord }) => {
// この連絡先の業界を親アカウントと比較してください
const rowIndustry = record.formattedValues?.industrycode;
const parentIndustry = parentRecord?.formattedValues?.industrycode;
const mismatch =
parentIndustry != null && rowIndustry != null && rowIndustry !== parentIndustry;
return (
<span style={{ color: mismatch ? 'var(--colorStatusDangerForeground1)' : 'inherit' }}>
{rowIndustry ?? '-'}
</span>
);
}}
/>
</GridColumns>
</SubGrid> <SubGrid RelationshipName="contact_customer_accounts">
<GridColumns>
<GridColumn ColumnName="fullname" TableName="contact" />
<GridColumn ColumnName="industrycode" TableName="contact">
<ChildContent>
@{
var rowIndustry = context.PrimaryRecord.FormattedValues
.GetValueOrDefault("industrycode");
var parentIndustry = context.ParentRecord?.FormattedValues
.GetValueOrDefault("industrycode");
var mismatch = parentIndustry is not null
&& rowIndustry is not null
&& rowIndustry != parentIndustry;
}
<span style="color: @(mismatch ? "var(--colorStatusDangerForeground1)" : "inherit")">
@(rowIndustry ?? "-")
</span>
</ChildContent>
</GridColumn>
</GridColumns>
</SubGrid> Reactパリティ
React側は cellRendererの parentRecord プロペラ(CellRendererProps.parentRecord)と同じ表面を使います。
グリッドテンプレートカラム
GridTemplateColumn列が単一のDataverse列にマッピングされていない場合に使う — 複数の生値を1セルにまとめたり、複数のフィールドをキーにしたステータスバッジを表示したり、データ依存なしの純粋な装飾アクションセルを発行したりします。GridColumnとは異なり、テンプレートの列にはColumnNameがなく、レンダラーがDependsOnで読み取る列を宣言し、フレームワークがそれらをFetchXML投影に統合するため、テンプレートを実行するとデータがctx.Row.PrimaryRecordに入ります。ChildContentには行、オプションのSubGrid親、宣言した列名でキーされた事前構築されたDependsOnMetadataルックアップを含むGridTemplateColumnContext(Context="ctx"属性で名前を付ける)を受け取ります。
React
Blazor
<MainGrid tableName="contact">
<GridColumns>
{/* ファーストネーム+ラストネームを1つの「フルネーム」にまとめる
独房。dependsOn は、どの列が
テンプレートは読み取るので、それらはフェッチに投影されます。
sortBy はヘッダーを lastname に sort します。
searchBy は両方をグリッドの検索に含みます。Highlighter はマッチングをマークします。 */}
<GridTemplateColumn
displayName="フルネーム"
dependsOn={['firstname', 'lastname']}
sortBy="lastname"
searchBy={['firstname', 'lastname']}
cellRenderer={({ record, searchText }) => {
const first = (record.properties?.firstname as { value?: string })?.value ?? '';
const last = (record.properties?.lastname as { value?: string })?.value ?? '';
return <strong><Highlighter text={`${first} ${last}`} searchText={searchText ?? null} /></strong>;
}}
/>
<GridColumn columnName="emailaddress1" />
</GridColumns>
</MainGrid> <MainGrid TableName="contact">
<Columns>
<GridColumns>
<!-- ファーストネーム+ラストネームを1つの「フルネーム」にまとめる
独房。DependsOnは、どの列が
テンプレートは読み取るので、それらはフェッチに投影されます。
SortBy はヘッダーの late late を lastname に割り当てます。
SearchByは両方をグリッドの検索に含みます。ハイライトは一致を示します。 -->
<GridTemplateColumn Title="フルネーム"
DependsOn="@(new[] { "firstname", "lastname" })"
SortBy="lastname"
SearchBy="@(new[] { "firstname", "lastname" })">
<ChildContent Context="ctx">
@{
var first = ctx.Row.PrimaryRecord
.GetValueOrDefault<StringValue>("firstname")?.Value ?? "";
var last = ctx.Row.PrimaryRecord
.GetValueOrDefault<StringValue>("lastname")?.Value ?? "";
}
<strong>@ctx.Highlight($"{first} {last}")</strong>
</ChildContent>
</GridTemplateColumn>
<GridColumn ColumnName="emailaddress1" />
</GridColumns>
</Columns>
</MainGrid> テンプレート列は、検索対象を指定する場合を指定しない限り、グリッドの検索には含まれません。 SearchBy (ReactのsearchBy )は列名を付けます。列は自動的に取得され、グリッドの通常のタイプルール(テキストは検索から始まるか、先頭 *の後に含まれ、数字や日付の列が比較される)で照合され、テンプレート列のタイトルの下にある検索ボックスに記載されます。 DependsOn の列は検索されるだけで検索されません。バッジの後ろにあるステータスコードが、誰かが入力した内容と一致してはいけません。検索結果を組み込みセルのようにマークするには、Blazorでセルのテキストを ctx.Highlight(text) でレンダリングするか、Reactでレンダラーのレンダラー searchText を <Highlighter> に渡します。どちらも SearchByがない列では空です。
テンプレートカラムとグリッドカラムのChildContent
GridColumn ChildContent それでもバウンドされた列をカスタマイズできます — ソート、編集、ディスパッチ、列ヘッダーはすべて単一の ColumnNameからキー化されます。単一の基礎となるカラム(複合セル、装飾アクションセル、複数のフィールドを組み合わせたステータスバッジ)がない場合にのみ GridTemplateColumn を選びましょう。両者を混同しても問題ありません。グリッドの列セット上で宣言された順序で交互に使えます。
装飾列(データ依存なし)
セルがインラインボタンやアイコンのような純粋な装飾コンテンツを表示する場合は、完全にスキ DependsOn ップしてください。フレームワークは依然として、レンダリングされたテーブルの正しい位置に柱を取り付けています。その列のサーバー投影には何も追加されません。
React
Blazor
{/* 純粋な装飾テンプレートの列:no dependsOn、レンダラー
列から読み上げることはありません。アクションボタンやアイコンに便利です。 */}
<GridTemplateColumn
displayName=""
width="80px"
cellRenderer={({ record }) => (
<Button
icon={<MoreHorizontal16Regular />}
onClick={() => openContextMenu(record.id)}
/>
)}
/> <!-- 純粋な装飾テンプレート欄:レンダラーのDependsOnはありません
列から読み上げることはありません。アクションボタンやアイコンに便利です。 -->
<GridTemplateColumn Title="" Width="80px">
<ChildContent Context="ctx">
<FluentButton IconStart="@(new Icons.Regular.Size16.MoreHorizontal())"
OnClick="@(() => OpenContextMenu(ctx.Row.PrimaryRecord.Id))" />
</ChildContent>
</GridTemplateColumn> インライン編集テンプレート
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
<GridTemplateColumn
displayName="フルネーム"
dependsOn={['firstname', 'lastname']}
sortBy="lastname"
// 読み取り専用テンプレート(既存のもの)。
cellRenderer={({ record }) => {
const first = (record.properties?.firstname as { value?: string })?.value ?? '';
const last = (record.properties?.lastname as { value?: string })?.value ?? '';
return <strong>{first} {last}</strong>;
}}
// 編集テンプレート:グリッドの編集可能なトグルがオンになっていると起動します
// しかもその行は可変です。2つの<TextEdit>"''エディターサイドを落とす
// 並べて、自動配線してダーティトラッキングと検証を行います
// まさに彼らが縛られていればそうするの<GridColumn>だ。
editRenderer={() => (
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
<TextEdit columnName="firstname" displayLabelWhenAvailable={false} />
<TextEdit columnName="lastname" displayLabelWhenAvailable={false} />
</div>
)}
/> <GridTemplateColumn Title="フルネーム"
DependsOn="@(new[] { "firstname", "lastname" })"
SortBy="lastname">
<!-- 読み取り専用テンプレート(既存のもの)。 -->
<ChildContent Context="ctx">
<strong>
@(ctx.Row.PrimaryRecord.GetValueOrDefault<StringValue>("firstname")?.Value)
@(ctx.Row.PrimaryRecord.GetValueOrDefault<StringValue>("lastname")?.Value)
</strong>
</ChildContent>
<!-- 編集テンプレート:グリッドの編集可能なトグルがオンになっていると発動します
しかもその行は可変です。2つの<TextEdit>"''エディターサイドを落とす
並べて、自動配線してダーティトラッキングと検証を行います
まさに彼らが縛られていればそうするの<GridColumn>だ。 -->
<EditChildContent Context="editCtx">
<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="6"
VerticalAlignment="VerticalAlignment.Center">
<TextEdit ColumnName="firstname"
DisplayLabelWhenAvailable="false"
DisplayTooltipWhenAvailable="false" />
<TextEdit ColumnName="lastname"
DisplayLabelWhenAvailable="false"
DisplayTooltipWhenAvailable="false" />
</FluentStack>
</EditChildContent>
</GridTemplateColumn> パターン2 — SetValue付きのカスタムウィジェット
エディターの表面がDataverseの列に1:1でマッピングされない場合は(単一の「First Last」テキストボックスで2列に解析され、複数のパーセントフィールドに結びついたスライダー、開始+終了を書くカスタム日付範囲ピッカー)、独自の入力をレンダリングし、影響を受けた各列ごとに editCtx.SetValue(columnName, value) を呼び出してください。フレームワークは書き込みを正しい AliasedTableRecord (ドット表記のリンクエンティティカラム名を処理)にルーティングし、レコードの ValueChanged イベントを発生させてダーティトラッキングと行の保留中の更新キューが変更を拾います。
React
Blazor
<GridTemplateColumn
displayName="フルネーム"
dependsOn={['firstname', 'lastname']}
sortBy="lastname"
cellRenderer={({ record }) => {
const first = (record.properties?.firstname as { value?: string })?.value ?? '';
const last = (record.properties?.lastname as { value?: string })?.value ?? '';
return <strong>{first} {last}</strong>;
}}
editRenderer={({ record, setValue }) => {
const first = (record.properties?.firstname as { value?: string })?.value ?? '';
const last = (record.properties?.lastname as { value?: string })?.value ?? '';
const combined = [first, last].filter(Boolean).join(' ');
return (
<Input
value={combined}
onChange={(_, data) => {
const next = data.value ?? '';
// 最初のマスで分かれて、その後は姓に入ります。
const idx = next.indexOf(' ');
const head = idx === -1 ? next : next.slice(0, idx);
const tail = idx === -1 ? '' : next.slice(idx + 1);
setValue('firstname', { $type: 'StringValue', value: head });
setValue('lastname', { $type: 'StringValue', value: tail || null });
}}
/>
);
}}
/> <GridTemplateColumn Title="フルネーム"
DependsOn="@(new[] { "firstname", "lastname" })"
SortBy="lastname">
<ChildContent Context="ctx">
@{
var first = ctx.Row.PrimaryRecord.GetValueOrDefault<StringValue>("firstname")?.Value;
var last = ctx.Row.PrimaryRecord.GetValueOrDefault<StringValue>("lastname")?.Value;
}
<strong>@first @last</strong>
</ChildContent>
<EditChildContent Context="editCtx">
@{
var combined =
(editCtx.Row.PrimaryRecord.GetValueOrDefault<StringValue>("firstname")?.Value ?? "")
+ " "
+ (editCtx.Row.PrimaryRecord.GetValueOrDefault<StringValue>("lastname")?.Value ?? "");
}
<FluentTextInput Value="@combined.Trim()" ValueChanged="@(next =>
{
// 最初のマスで分かれて、その後は姓に入ります。
var parts = next.Split(' ', 2);
editCtx.SetValue("firstname", new StringValue { Value = parts[0] });
editCtx.SetValue("lastname", new StringValue { Value = parts.Length > 1 ? parts[1] : null });
})" />
</EditChildContent>
</GridTemplateColumn> 命令型経路での検証
標準的なエディタはEditChildContent行のEditContextValidatorに自動的にレジスタに入り、フレームワークの保存前検証ゲートに参加します。editCtx.SetValueパスはそのパイプラインをバイパスします 。フレームワークは登録されたエディタから来ていない値を検証できません。カスタムウィジェットが制約を強制する必要がある場合は、SetValue呼び出す前にValueChangedコールバック内で制約を実行するか、可能な限りドロップインエディタパターンに戻してください。
サブグリッドにおいて
MainGridに適用されることはすべて同じように動作SubGrid。宣言済みの列とButtonsレンダリングフラグメント内のツールバーボタンを組み合わせることで、親レコードの関連コレクションに限定した集中したインライン編集体験を提供し、セルのテンプレート@@context.ParentRecordと組み合わせてサブグリッドの親を基にした条件付きフォーマットを活用しましょう。
React
Blazor
<SubGrid relationshipName="contact_customer_accounts">
<GridColumns>
<GridColumn columnName="fullname" />
<GridColumn columnName="emailaddress1" />
<GridColumn columnName="telephone1" />
</GridColumns>
<GridButtons>
<NewRecordGridButton>
<NewContactForm />
</NewRecordGridButton>
<DeleteRecordGridButton />
</GridButtons>
</SubGrid> <SubGrid RelationshipName="contact_customer_accounts">
<GridColumns>
<GridColumn ColumnName="fullname" />
<GridColumn ColumnName="emailaddress1" />
<GridColumn ColumnName="telephone1" />
</GridColumns>
<Buttons>
<NewRecordGridButton TForm="NewContactForm" />
<DeleteRecordGridButton />
</Buttons>
</SubGrid> パラメータ参照
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つのオーサリングパターンについては、上記の インライン編集テンプレート を参照してください。
