Click here to Skip to main content
15,867,686 members
Articles / Programming Languages / C# 3.5
Tip/Trick

Currency Masking in Silverlight Datagrid

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
6 May 2010CPOL 23.5K   1   2
The code shows how to implement currency masking (format like $21,900) in Silverlight DataGrid using the IValueConverter. User can edit the data in numbers with out entering the commas.Having knowledge in Silverlight data binding to DataGrid is enough to understand the code.Create a simple...

The code shows how to implement currency masking (format like $21,900) in Silverlight DataGrid using the IValueConverter. User can edit the data in numbers with out entering the commas.



Having knowledge in Silverlight data binding to DataGrid is enough to understand the code.
Create a simple Silverlight application in Visual Studio and create a class implementing the IValueConverter in the Silverlight project created in the solution, to use the class as value converter to render the values to datagrid cells in the required format.



/// <summary>
/// <c>CurrencyConverter</c> class converts the values to thousand seperated number in the grid.
/// </summary>
public class CurrencyConverter : IValueConverter
{
    /// <summary>
    /// <c>Convert</c> method will convert to string in a format disirable to show to user.
    /// </summary>
    /// <param name="value">Value to format</param>
    /// <param name="targetType"></param>
    /// <param name="parameter"></param>
    /// <param name="culture"></param>
    /// <returns>Formatted string to bing to grid.</returns>
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        int? inputInt = value as int?;
        if (inputInt.HasValue)
        {
            return "$" + inputInt.Value.ToString("N0", culture);
        }
        else
        {
            decimal? inputDecimal = value as decimal?;
            if (inputDecimal.HasValue)
            {
                return "$"+inputDecimal.Value.ToString("N0", culture);
            }
        }
        return String.Empty;
    }
    /// <summary>
    /// <c>ConvertBack</c> method will convert back the entered text to value
    /// </summary>
    /// <param name="value">value entered by user.</param>
    /// <param name="targetType">Target type to convert</param>
    /// <param name="parameter"></param>
    /// <param name="culture">Current culture</param>
    /// <returns>Int value of the revenue</returns>
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string input = value as string;
        if (input != null)
        {
            if (input[0] == '$')
            {
                input = input.Substring(1);
                input = input.Replace(",", "").Replace(".", "");
                Regex objRegNum = new Regex(@"^\d*[0-9](|.\d*[0-9])?$");
                if (!objRegNum.IsMatch(input))
                    input = "0";
                return int.Parse(input);
            }
            else
            {
                input = "0";
            }
        }
        return value;
    }
}


Add the datagrid in your Silverlight page, that looks just like the following -



<UserControl x:Class="CurrencyMasking.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:local="clr-namespace:CurrencyMasking;assembly=CurrencyMasking">
<UserControl.Resources>
    <local:CurrencyConverter x:Key="NumberFormatConverter"/>
</UserControl.Resources>

<Grid x:Name="LayoutRoot">
    <data:DataGrid AutoGenerateColumns="False" HorizontalAlignment="Left" 
        FontWeight="Bold" x:Name="grdEmp" Height="200"
        RowBackground="#FF75A0D3" VerticalAlignment="Top"
        CanUserResizeColumns="False">
        <data:DataGrid.Columns>
            <data:DataGridTextColumn Width="100" Header="Name"
                Binding="{Binding Name}">
            </data:DataGridTextColumn>
            <data:DataGridTextColumn Width="100" Header="Salary" 
                Binding="{Binding Salary, Converter={StaticResource NumberFormatConverter}}">
            </data:DataGridTextColumn>
        </data:DataGrid.Columns>
    </data:DataGrid>
</Grid>

</UserControl>


The 'NumberFormatConverter' resource is created from the class CurrencyConverter.  The static resource is binded to the column to render the values in the Currency format.



License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
India India
Hi, I am Narsimlu Keshagouni working as Technical Lead in Hyderabad, India.

Comments and Discussions

 
GeneralReason for my vote of 5 This works Pin
defwebserver7-Aug-10 10:06
defwebserver7-Aug-10 10:06 
GeneralNice! Pin
Matt Kloss2-Jun-11 3:56
Matt Kloss2-Jun-11 3:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.