Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
WebDataGrid で値のフォーマット:通貨を表示してみよう!

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

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 を利用することで右寄せを行うことができます。

WebDataGrid 通貨表示

 


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

 

実行結果:
価格列に通貨記号(\)が表示され、数値の右寄せが行われました。

WebDataGrid 通貨表示

 

サンプルはこちらから

WebDataGrid_DataFormatString_CS.zip

WebDataGrid_DataFormatString_VB.zip

 

WebDataGrid の機能は多岐にわたります。よくお問い合わせ頂く内容につきましては一部このブログでも実装方法や設定方法を紹介させていただいております。是非ご活用ください。

WebDataGrid 利用方法一覧
http://blogs.jp.infragistics.com/blogs/yuki-mita/archive/2013/08/15/26213.aspx

 

弊社製品は機能制限なしのトライアル版もご用意しています。ダウンロードはこちらから。

Infragistics 製品トライアルダウンロード

Posted: 31 Jan 2014, 17:51
Anonymous comments are disabled