DataGrid の列に画像を表示する

IgbDataGrid は非推奨のコントロールです。代わりに IgbGrid をご利用ください。IgbGrid での実装方法についてご不明な点がありましたら弊社技術サポートまでお問い合わせください。

Blazor DataGrid では、ImageColumn を利用することで、列に画像を表示することができます。

下記例では、Photo 列、Flag 列で ImageColumn を利用しています。

<DataGrid Height="100%" Width="100%" RowHeight="50" @ref="@DataGridRef"
          DataSource="Employees"
          AutoGenerateColumns="false"
          ActivationMode="GridActivationMode.Cell">

    <ImageColumn IsEditable="false" Width="100" Field="Photo" PaddingTop="5" PaddingBottom="5" PaddingRight="10"
                 HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" />

    ...
    
    <ImageColumn IsEditable="false" Width="@("*>110")" Field="CountryFlag" HeaderText="Flag"
                 PaddingTop="5" PaddingBottom="5" PaddingRight="10"
                 HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" />

    ...
</DataGrid>

実行結果

Photo 列と、Flag 列に画像が表示されました。