Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Collapse]Data Editor Extensions
    Editor List
    Main Features
   [Collapse]Common Concepts
     Binding Data Editors to Data
     Getting Editor Values
     Mask Editing
    [Expand]Validation
     Accessibility Support
   [Expand]Editor Types
   [Expand]Strongly-Typed Editor Types
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Mask Editing

The DevExpress editors allow you to use masks during editing. Masks are useful when a string entered by an end-user into an editor matches a specific format. For instance, a text editor that accepts date/time values in the 24-hour format only, or only numeric values, or a phone number that only allows an end-user to enter digits into automatically constructed placeholders.

Within the MVC Editors components, masked input is supported by the following editor types.

  • Text box editors (in particular, the TextBox and ButtonEdit).

    Mask settings can be accessed via the TextBoxProperties.MaskSettings (ButtonEditProperties.MaskSettings) property. The editor's mask can be specified via the MaskSettings.Mask property.

    This example demonstrates how you can define mask editing settings for the TextBox MVC extension.

    The image below shows the result:

    View code (Razor):

  • Date editors (DateEdit).

    To enable masked input in a date editor, the DateEditProperties.UseMaskBehavior property should be set to true. The mask can be defined via the DateEditProperties.EditFormatString property, if the DateEditProperties.EditFormat property is set to EditFormat.Custom.

    This example demonstrates how you can define mask editing settings for the DateEdit MVC extension.

    The image below shows the result:

    View code (Razor):

Note

Defining a text box editor's mask via the editor's MaskSettings.Mask property automatically activates the editor's built-in validation functionality. This might affect the editor's appearance, because some extra space might be occupied for an error image and text to be displayed for invalid input, which is due to an editor's default validation settings. To customize the editor appearance in this case, use validation properties available via the editor's ValidationSettings property (for instance, you can modify the ValidationSettings.Display or ValidationSettings.ErrorDisplayMode property, etc). You can also provide a mask-specific error text via the MaskSettings.ErrorText property of an editor.

Expanded Concepts

The following topics are available within the ASPxEditors Mask Editing section and describe mask editing concepts.

How would you rate this topic?​​​​​​​