WebDataGrid で値のフォーマット：通貨を表示してみよう！ - インフラジスティックス・ジャパン株式会社Blog

今回は数値の通貨表示を通してセル値のフォーマット方法をご紹介します。

WebDataGrid でセル値のフォーマットを行うには、列の DataFormatString プロパティに書式を指定します。今回は数値を通貨として表示しますので、DataFormatString プロパティに {0:C0} を指定します。

DataFormatString による通貨記号表示

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px"
    AutoGenerateColumns="False" DataKeyFields="ID">
    <Columns>
        <ig:BoundDataField Key="ID" Header-Text="製品ID" />
        <ig:BoundDataField Key="Name" Header-Text="商品名" />
        <ig:BoundDataField Key="Price" Header-Text="価格" DataFormatString="{0:C0}"/>
    </Columns>
    ...
</ig:WebDataGrid>

実行結果：

価格列の数値の前に通貨記号（\）が表示されました！ただ、通貨は右寄せになっていることが多いと思います。続いて価格列の数値を右寄せにしてみましょう。WebDataGrid では CSS を利用することで右寄せを行うことができます。

CSS の定義

<style type="text/css">
    tbody.igg_Item > tr > td.CurrencyStyle {
        text-align: right;
    }
</style>

CSS の割り当て

C#

protected void Page_Load(object sender, EventArgs e)
{
    ...
    // CSS の適用
    this.WebDataGrid1.Columns["Price"].CssClass = "CurrencyStyle";
}

VB.NET

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    ...
    ' CSS の適用
    Me.WebDataGrid1.Columns("Price").CssClass = "CurrencyStyle"
End Sub