VIBlend
Home Products Downloads Purchase Support Forum About Blog

DataGrid Mask Column

by viblend 23. January 2011 08:09

The mask editor control ensures a formatted appearance to underlying string values and also validates the user input. This post demonstrates how to create a mask column in VIBlend DataGrid for Silverlight.

1. At first, create the DataGrid control and set up the binding expressions.  We setup the first column to display a string value and the second column with a phone number mask “(###) ###-####″. The MaskEditor’s EditorValue property is bound to the PhoneNumber property in the data source.

  <Grid x:Name="LayoutRoot" Background="White">
    <Grid.Resources>
        <local:PhoneNumberConverter x:Key="PhoneNumberConverter"></local:PhoneNumberConverter>

        <DataTemplate x:Key="cellEditMaskEditorTemplate">
            <viblendEditors:MaskEditor FontSize="9" Mask="(###) ###-####" EditorValue="{Binding PhoneNumber, Mode=TwoWay, Converter={StaticResource PhoneNumberConverter}}"/>
        </DataTemplate>
    </Grid.Resources>
    <viblendDataGrid:DataGrid ItemsSource="{Binding}" Name="dataGrid1" Margin="10">
        <viblendDataGrid:DataGrid.BoundFields>
            <viblendDataGrid:BoundField Text="Name" DataField="Name" Width="175" SortMode="Automatic"/>
            <viblendDataGrid:BoundField Text="Phone Number" DataField="PhoneNumber" CellEditorActivationFlags="MOUSE_CLICK_SELECTED_CELL" CellEditorDeActivationFlags="MOUSE_CLICK" CellEditTemplate="{StaticResource cellEditMaskEditorTemplate}" Width="175"/>
        </viblendDataGrid:DataGrid.BoundFields>
    </viblendDataGrid:DataGrid>
</Grid>

 

2.. Populate the DataGrid.

C#

public partial class MainPage : UserControl
 {
        public MainPage()
        {

            InitializeComponent();

            List<User> users = new List<User>();

            for (int i = 0; i < 3; i++)
            {
                User user = new User(name[i], phones[i]);
                users.Add(user);
            }

            this.DataContext = users;
        }

        public class User
        {
            public User(string name, string phoneNumber)
            {
                this.Name = name;
                this.PhoneNumber = phoneNumber;
            }

            public string Name
            {
                get;
                set;
            }

            public string PhoneNumber
            {
                get;
                set;
            }
        }
 

        string[] name = new string[]
                {
                    "Andrew",
                    "Nancy",
                    "Shelley",
                };

        string[] phones = new string[]
                {
                    "(617) 245-9601",
                    "(615) 621-2121",
                    "(612) 555-3251",
                };
    }

 VB .NET

Partial Public Class MainPage
    Inherits UserControl
        Public Sub New()

            InitializeComponent()

            Dim users As List(Of User) = New List(Of User)()

            For i As Integer = 0 To 2
                Dim user As New User(name(i), phones(i))
                users.Add(user)
            Next i

            Me.DataContext = users
        End Sub

        Public Class User
            Public Sub New(ByVal name As String, ByVal phoneNumber As String)
                Me.Name = name
                Me.PhoneNumber = phoneNumber
            End Sub

            Private privateName As String
            Public Property Name() As String
                Get
                    Return privateName
                End Get
                Set(ByVal value As String)
                    privateName = value
                End Set
            End Property

            Private privatePhoneNumber As String
            Public Property PhoneNumber() As String
                Get
                    Return privatePhoneNumber
                End Get
                Set(ByVal value As String)
                    privatePhoneNumber = value
                End Set
            End Property
        End Class


        Private name() As String = { "Andrew", "Nancy", "Shelley" }

        Private phones() As String = { "(617) 245-9601", "(615) 621-2121", "(612) 555-3251" }
End Class

3. In order to format a grid cell value into a MaskEditor.EditorValue, create a class that implements the IValueConverter interface and then implement the Convert and ConvertBack methods. The following code snippet shows the implementation of a phone-number converter that converts the grid cell value passed in so that it displays it in the MaskEditor.

C#

public class PhoneNumberConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string valueString = value.ToString();
        string phoneNumberString = "";
        for (int i = 0; i
<valueString.Length; i++)
        {
            if (Char.IsDigit(valueString[i]))
            {
                phoneNumberString += valueString[i];
            }
        }

        return phoneNumberString;
    }

    public object ConvertBack(object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
    {
        if (value != null)
        {
            string phoneString = value.ToString();

            if (phoneString.Length >0)
            {
                phoneString = phoneString.Insert(0, "(");
            }

            if (phoneString.Length > 4)
            {
                phoneString = phoneString.Insert(4, ")");
            }

            if (phoneString.Length > 8)
            {
                phoneString = phoneString.Insert(8, "-");
            }

            return phoneString;
        }
        else
        {
            return "";
        }
    }
}

VB .NET

 Public Class PhoneNumberConverter
    Implements IValueConverter
    Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object
        Dim valueString As String = value.ToString()
        Dim phoneNumberString As String = ""
        For i As Integer = 0 To valueString.Length - 1
            If Char.IsDigit(valueString.Chars(i)) Then
                phoneNumberString &= valueString.Chars(i)
            End If
        Next i

        Return phoneNumberString
    End Function

    Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object
        If value IsNot Nothing Then
            Dim phoneString As String = value.ToString()

            If phoneString.Length >0 Then
                phoneString = phoneString.Insert(0, "(")
            End If

            If phoneString.Length > 4 Then
                phoneString = phoneString.Insert(4, ")")
            End If

            If phoneString.Length > 8 Then
                phoneString = phoneString.Insert(8, "-")
            End If

            Return phoneString
        Else
            Return ""
        End If
    End Function
End Class

 

 

 

Ribbon Bar for Silverlight

by viblend 4. January 2011 20:08

The next version of VIBlend Controls for Silverlight is approaching and there is one major control that will come with it.  The new VIBlend Ribbon Bar control for Silverlight will allow you to easily add an Office 2010 ribbon user interface to your Silverlight applications.

 

Key Features:

  • Office 2010 Themes:  Blue, Black and Silver
  • Contextual Tab groups
  • Key Tips and Screen tips
  • Built-in Ribbon Gallery control with powerful customization capabilities
  • Ability to add any control into the ribbon groups, galleries, popups, menus, or the application menu.
  • Ability to display close buttons in the RibbonTab items
  • Quick access toolbar which can be displayed above or below the ribbon.
  • Minimized mode
  • Built-in commands for commonly used operations
  • Built-in ContextMenu
If you have any questions or suggestions, feel free to contact us at support@viblend.com

About the author

Some text that describes me

Tag cloud

Recent comments

Comment RSS
Copyright © 2011 VIBlend  
ALL RIGHTS RESERVED  
 
Terms of Use | Privacy Policy
WinForms Controls Purchase Online About Us
       
DataGrid Navigation Pane Technical Support Blog
ScrollBar TreeView
ListBox ProgressBar Downloads Register
ComboBox Buttons
TabControl Editors Documentation Client Login

VIBlend Blog is powered by BlogEngine.NET