Blazor 列タイプ
Ignite UI for Blazor Data Table / Data Grid は、データを Blazor データ グリッドに表示する方法を 5 つの列タイプとテンプレート列タイプから選択できます。サポートされている列タイプは、Text 列、Numeric 列、DateTime 列、Image 列、ComboBox および Template です。
各列は、Field
プロパティを、グリッドにバインドされた基になる データソースの項目の対応するプロパティの名前に設定することによって Blazor データ グリッドにバインドします。
Blazor 列タイプの例
テキスト列
Blazor データ グリッド は、関連付けられたセルに書式設定されたテキストを表示するために使用されます。これは、string 型のデータを表示するために使用されるデフォルトの列型です。
数値列
NumericColumn
は、関連付けられたセルに書式設定された数値を表示するために使用され、セル内の小数点以下の桁数の制御と小数桁の表示を可能にします。
DateTime 列
DateTimeColumn
は、関連付けられたセルに Date オブジェクトを表示するために使用され、Date オブジェクトを適切に表示する方法をコントロールで制御できます。
画像列
ImageColumn
はセル内に画像を表示するために使用され、その ImageStretchOption
オプションを使用してセルの画像ストレッチカスタマイズのためのオプションを公開します。
ImageResourceType
オプションを設定して、イメージのリソースの種類を選択することもできます。
コンボボックス列
ComboBoxColumn
は、エンドユーザーが単一の項目を選択できるドロップダウン リストを表示するために使用されます。
データ バインディングは、列の DataSource
プロパティで複合オブジェクトの配列を使用して実現できます。
TextField
プロパティはユーザーが選択を行うときに表示する値を決定します。
ValueField
プロパティは選択された基本データ項目のバインド値を決定します。オブジェクトのリストに複数のプロパティがある場合に必要です。
テンプレート列
TemplateColumn
はセルテンプレートと共に使用されます。カスタム テンプレートを列のセルに適用することができます。これは、テンプレート列の CellUpdating
イベントを処理することによって行われます。
CellUpdating
イベントの引数は、イベントを発生させる TemplateColumn
と TemplateCellUpdatingEventArgs
パラメーターを公開します。このイベント引数パラメーターは、列の関連付けられたセル内に配置される HTMLDivElement を返す Content
プロパティを公開します。その後、この div に新しい要素を追加することができます。
TemplateCellUpdatingEventArgs
は、TemplateCellInfo
オブジェクトを取得するために使用できる CellInfo
プロパティも公開しています。このオブジェクトは、インデックス、基になるデータ項目、セルの外観など、セルと行に関する情報を公開します。
スパークライン列
Sparkline コンポーネントを TemplateColumn
に埋め込み、より複雑なデータ構造を表示できます。
この方法の詳細については、 列スパークライン トピックを参照してください。
コード スニペット
以下は、このトピックで説明されている各列の実装を示します。
以下は、上記の列で使用するサンプルデータソースです。
<DataGrid Height="100%" Width="100%"
DefaultColumnMinWidth="120"
AutoGenerateColumns="false"
DataSource="DataSource">
<TextColumn Field="FirstName" HeaderText="First Name" />
<TextColumn Field="LastName" HeaderText="Last Name" />
<ComboBoxColumn Field="City" />
<TemplateColumn Field="Address" HeaderText="Address" CellUpdatingScript="onUpdatingAddressColumn" />
<ImageColumn Field="Photo" HeaderText="Photo" />
<NumericColumn Field="Age" HeaderText="Age" />
<DateTimeColumn Field="Birthday" HeaderText="Date of Birth" />
</DataGrid>
// In JS file:
function onUpdatingAddressColumn(grid, args) {
let content = args.content;
let info = args.cellInfo;
let item = info.rowItem;
let span1 = null;
let span2 = null;
if (content.childElementCount === 0) {
content.style.fontFamily = "Verdana";
content.style.fontSize = "13px";
content.style.verticalAlign = "center";
content.style.lineHeight = "normal";
content.style.display = "flex";
content.style.flexDirection = "column";
content.style.justifyContent = "center";
content.style.height = "100%";
content.style.width = "100%";
content.style.color = "rgb(24, 29, 31)";
// stacking above elements in the content of grid's cell
span1 = document.createElement("span");
span2 = document.createElement("span");
content.appendChild(span1);
content.appendChild(span2);
}
else {
span1 = content.children[0];
span2 = content.children[1];
}
if (span1 && span2) {
// updating elements in the content of grid's cell
span1.textContent = item.Street;
span2.textContent = item.City + ", " + item.Country;
}
}
igRegisterScript("onUpdatingAddressColumn", onUpdatingAddressColumn, false);