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);

Blazor 列タイプ