[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

    Blazor 列タイプ

    Ignite UI for Blazor Data Table / Data Grid は、データを Blazor データ グリッドに表示する方法を 5 つの列タイプとテンプレート列タイプから選択できます。サポートされている列タイプは、Text 列、Numeric 列、DateTime 列、Image 列、ComboBox および Template です。

    各列は、Field プロパティを、グリッドにバインドされた基になる データ ソースの項目の対応するプロパティの名前に設定することによって Blazor データ グリッドにバインドします。

    Blazor 列タイプの例

    テキスト列

    Blazor データ グリッド は、関連付けられたセルに書式設定されたテキストを表示するために使用されます。これは、string 型のデータを表示するために使用されるデフォルトの列型です。

    数値列

    IgbNumericColumn は、関連付けられたセルに書式設定された数値を表示するために使用され、セル内の小数点以下の桁数の制御と小数桁の表示を可能にします。

    DateTime 列

    IgbDateTimeColumn は、関連付けられたセルに Date オブジェクトを表示するために使用され、Date オブジェクトを適切に表示する方法をコントロールで制御できます。

    画像列

    IgbImageColumn はセル内に画像を表示するために使用され、その ImageStretchOption オプションを使用してセルの画像ストレッチカスタマイズのためのオプションを公開します。

    ImageResourceType オプションを設定して、イメージのリソースの種類を選択することもできます。

    コンボボックス列

    IgbComboBoxColumn は、エンドユーザーが単一の項目を選択できるドロップダウン リストを表示するために使用されます。

    データ バインディングは、列の DataSource プロパティで複合オブジェクトの配列を使用して実現できます。

    TextField プロパティはユーザーが選択を行うときに表示する値を決定します。

    ValueField プロパティは選択された基本データ項目のバインド値を決定します。オブジェクトのリストに複数のプロパティがある場合に必要です。

    テンプレート列

    IgbTemplateColumn はセルテンプレートと共に使用されます。カスタム テンプレートを列のセルに適用することができます。これは、テンプレート列の CellUpdating イベントを処理することによって行われます。

    CellUpdating イベントの引数は、イベントを発生させる IgbTemplateColumn と IgbTemplateCellUpdatingEventArgs パラメーターを公開します。このイベント引数パラメーターは、列の関連付けられたセル内に配置される HTMLDivElement を返す Content プロパティを公開します。その後、この div に新しい要素を追加することができます。

    IgbTemplateCellUpdatingEventArgs は、TemplateCellInfo オブジェクトを取得するために使用できる CellInfo プロパティも公開しています。このオブジェクトは、インデックス、基になるデータ項目、セルの外観など、セルと行に関する情報を公開します。

    スパークライン列

    Sparkline コンポーネントを IgbTemplateColumn に埋め込み、より複雑なデータ構造を表示できます。 この方法の詳細については、列スパークライン トピックを参照してください。

    コード スニペット

    以下は、このトピックで説明されている各列の実装を示します。

    以下は、上記の列で使用するサンプルデータ ソースです。

    <IgbDataGrid Height="100%" Width="100%"
    DefaultColumnMinWidth="120"
    AutoGenerateColumns="false"
    DataSource="DataSource">
    <IgbTextColumn Field="FirstName" HeaderText="First Name" />
    <IgbTextColumn Field="LastName" HeaderText="Last Name" />
    <IgbComboBoxColumn Field="City" />
    <IgbTemplateColumn Field="Address" HeaderText="Address" CellUpdatingScript="onUpdatingAddressColumn" />
    <IgbImageColumn Field="Photo" HeaderText="Photo" />
    <IgbNumericColumn Field="Age" HeaderText="Age" />
    <IgbDateTimeColumn Field="Birthday" HeaderText="Date of Birth" />
</IgbDataGrid>

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

    API リファレンス