DxMaskedInputSettings.Mask Property

Specifies a mask pattern.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public string Mask { get; set; }

Property Value

Type	Default	Description
String	null	A mask pattern string.

Remarks

The masked input editor supports the following mask types:

• Date-Time
• Date-Time Offset
• Time Span
• Numeric
• Text
• Regular Expression

Assign a mask pattern to the Mask property to apply a mask to the masked input editor. Refer to the following topic for more information: Apply a Mask.

The following code snippet applies a regular expression mask:

Razor

@inject EmployeeService EmployeeData

<DxGrid Data="@employees" PageSize="4" EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="BirthDate" />
        <DxGridDataColumn FieldName="HireDate" />
        <DxGridDataColumn FieldName="Email"  >
            <EditSettings>
                <DxMaskedInputSettings MaskMode="MaskMode.RegEx" Mask="@EmailMask" />
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

@code {
    Employee[]? employees;
    string EmailMask { get; set; } = @"(\w|[.-])+@(\w|-)+\.(\w|-){2,4}";

    protected override async Task OnInitializedAsync() {
        employees = await EmployeeData.GetData();
    }
}

EmployeeService.cs

public class EmployeeService {
    public Task<Employee[]> GetData() {
        List<Employee> employee = new List<Employee>();

        employee.Add(new Employee() { ID = 00156, FirstName = "Nancy", LastName = "Davolio", BirthDate = new DateTime(1978, 08, 12), HireDate= new DateTime(2002, 10, 01), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 01200, FirstName = "Andrew", LastName = "Fuller", BirthDate = new DateTime(1974, 02, 11), HireDate = new DateTime(2002, 06, 21), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 00567, FirstName = "Janet", LastName = "Leverling", BirthDate = new DateTime(1985, 06, 30), HireDate = new DateTime(2010, 07, 17), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 00168, FirstName = "Margaret", LastName = "Peacock", BirthDate = new DateTime(1990, 12, 25), HireDate = new DateTime(2014, 11, 09), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 01290, FirstName = "Steven", LastName = "Buchanan", BirthDate = new DateTime(1995, 03, 05), HireDate = new DateTime(2020, 01, 13), Email = "[e-mail]" });
        employee.Add(new Employee() { ID = 00938, FirstName = "Michael", LastName = "Suyama", BirthDate = new DateTime(1987, 02, 28), HireDate = new DateTime(2018, 03, 22), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 01098, FirstName = "Robert", LastName = "King", BirthDate = new DateTime(1992, 11, 08), HireDate = new DateTime(2018, 12, 15), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 03027, FirstName = "Laura", LastName = "Callahan", BirthDate = new DateTime(1991, 10, 18), HireDate = new DateTime(2015, 11, 03), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 00633, FirstName = "Anne", LastName = "Dodsworth", BirthDate = new DateTime(1983, 01, 21), HireDate = new DateTime(2004, 08, 21), Email= "[e-mail]" });
        return Task.FromResult(employee.ToArray());
    }
}

Employee.cs

public class Employee {
    public int ID { get; set; }
    public string? FirstName { get; set; }
    public string? LastName { get; set; }
    public DateTime? BirthDate { get; set; }
    public DateTime? HireDate { get; set; }
    public string? Email { get; set; }
}

To change the input mask at runtime, use the IMaskedInputSettings.Mask property instead.

Implements

Mask