How to Create Custom Mask Tokens
You can find a list of all built-in mask tokens that you can use when defining the mask of the RadMaskedInput controls in the Mask Tokens article. However, when your scenario requirements cannot be implemented using the built-in tokens, you can create a custom mask token to better fit your needs.
In order to create a custom mask token, you need to define a new class that should implement the ITokenValidationRule interface.
Example 1: Creating custom class which inherits ITokenValidationRule interface
using System.Linq;
using Telerik.Windows.Controls.MaskedInput.Tokens;
public class CustomToken : ITokenValidationRule
{
public bool IsRequired
{
get { throw new NotImplementedException(); }
}
public bool IsValid(char ch)
{
throw new NotImplementedException();
}
public char Token
{
get { throw new NotImplementedException(); }
}
public TokenTypes Type
{
get { throw new NotImplementedException(); }
}
public string ValidChars
{
get { throw new NotImplementedException(); }
}
}
Public Class CustomToken
Implements ITokenValidationRule
Public ReadOnly Property IsRequired() As Boolean Implements ITokenValidationRule.IsRequired
Get
Throw New NotImplementedException()
End Get
End Property
Public Function IsValid(ByVal ch As Char) As Boolean Implements ITokenValidationRule.IsValid
Throw New NotImplementedException()
End Function
Public ReadOnly Property Token() As Char Implements ITokenValidationRule.Token
Get
Throw New NotImplementedException()
End Get
End Property
Public ReadOnly Property Type() As TokenTypes Implements ITokenValidationRule.Type
Get
Throw New NotImplementedException()
End Get
End Property
Public ReadOnly Property ValidChars() As String Implements ITokenValidationRule.ValidChars
Get
Throw New NotImplementedException()
End Get
End Property
End Class
Then you can start configuring the custom token through the following properties:
IsRequired- this property is of type bool and it defines if the value that the token represents is a required input.
Token - this property is of type char and it keeps the char that represents the custom mask token.
-
Type - this property is an enumeration of type TokenTypes and it represents the type of the token. The TokenTypes enumeration exposes the following values:
- AlphaNumeric - tokens that represent a combination of alphabetic and numeric characters;
- Date - tokens that represent DateTime values;
Modifier - characters that modify the entered input.
ValidChars - this property is of type string and it holds the string of characters that the mask token will represent.
Example 2: Create CustomToken class
public class CustomToken : ITokenValidationRule
{
public bool IsRequired
{
get { return false; }
}
public bool IsValid(char ch)
{
throw new NotImplementedException();
}
public char Token
{
get { return '$'; }
}
public TokenTypes Type
{
get { return TokenTypes.AlphaNumeric; }
}
private string myValidChars = "0123456789#";
public string ValidChars
{
get { return myValidChars; }
}
}
Public Class CustomToken
Implements ITokenValidationRule
Public ReadOnly Property IsRequired() As Boolean Implements ITokenValidationRule.IsRequired
Get
Return False
End Get
End Property
Public Function IsValid(ByVal ch As Char) As Boolean Implements ITokenValidationRule.IsValid
Throw New NotImplementedException()
End Function
Public ReadOnly Property Token() As Char Implements ITokenValidationRule.Token
Get
Return "$"c
End Get
End Property
Public ReadOnly Property Type() As TokenTypes Implements ITokenValidationRule.Type
Get
Return TokenTypes.AlphaNumeric
End Get
End Property
Private myValidChars As String = "0123456789#"
Public ReadOnly Property ValidChars() As String Implements ITokenValidationRule.ValidChars
Get
Return myValidChars
End Get
End Property
End Class
When you define the properties that describe the custom token, you need to implement a logic that controls whether the entered character is valid for that custom token. This logic should be placed in the IsValid() method, that should validate the user input to return a bool value.
Example 3: Validating the entered character
public bool IsValid(char ch)
{
return ValidChars.Contains(ch);
}
Public Function IsValid(ByVal ch As Char) As Boolean
Return ValidChars.Contains(ch)
End Function
Finally our custom token will have the following dеfinition:
Example 4: Final custom token definition
public class CustomToken : ITokenValidationRule
{
public bool IsRequired
{
get { return false; }
}
public bool IsValid(char character)
{
return ValidChars.Contains(character);
}
public char Token
{
get { return '$'; }
}
public TokenTypes Type
{
get { return TokenTypes.AlphaNumeric; }
}
private string myValidChars = "0123456789#";
public string ValidChars
{
get { return myValidChars; }
}
}
Public Class CustomToken
Implements ITokenValidationRule
Public ReadOnly Property IsRequired() As Boolean Implements ITokenValidationRule.IsRequired
Get
Return False
End Get
End Property
Public Function IsValid(ByVal ch As Char) As Boolean Implements ITokenValidationRule.IsValid
Return ValidChars.Contains(ch)
End Function
Public ReadOnly Property Token() As Char Implements ITokenValidationRule.Token
Get
Return "$"c
End Get
End Property
Public ReadOnly Property Type() As TokenTypes Implements ITokenValidationRule.Type
Get
Return TokenTypes.AlphaNumeric
End Get
End Property
Private myValidChars As String = "0123456789#"
Public ReadOnly Property ValidChars() As String Implements ITokenValidationRule.ValidChars
Get
Return myValidChars
End Get
End Property
End Class
In order to use this custom token in the MaskedInput controls, you have to add it in the MaskedInput.Tokens using the TokenLocator class AddCustomValidationRule() method. This method takes as an argument an object of type ITokenValidationRule so you can pass the custom token.
After the custom token is added in the Tokens collection of the RadMaskedInput controls, you can use it in the RadMaskedTextInput control definition:
Example 5: Defining RadMaskedTextInput control in XAML
<Grid Background="White">
<telerik:RadMaskedTextInput Width="200"
Margin="20 20 20 10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Mask="$$-$$$$-$$$$" />
</Grid>
