DxMaskedInputSettings.MaskMode Property

Specifies a mask mode.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[DefaultValue(MaskMode.Auto)]
[Parameter]
public MaskMode MaskMode { get; set; }

Property Value

Type	Default	Description
MaskMode	Auto

An enumeration value.

Available values:

Name	Description
Auto

The component activates a mask type based on the Value data type.

| | Numeric |

The component activates the Numeric mask type.

| | DateTime |

The component activates the Date-time mask type.

| | RegEx |

The component activates the Regular Expression mask type.

| | Text |

The component activates the Text mask type.

| | DateTimeOffset |

The component activates the Date-time Offset mask type.

| | TimeSpan |

The component activates the Time Span mask type.

| | DateOnly |

The component activates the DateOnly mask type.

| | TimeOnly |

The component activates the TimeOnly mask type.

Remarks

The masked input editor activates a mask type based on the column data type. For instance, if you bind the column to a DateTime object, the editor activates the date-time mask type.

The component cannot automatically activate the regular expression mask type because no data type corresponds to this mask type. Set the MaskMode property to RegEx to manually activate the regular expression mask type.

Razor
EmployeeService.cs
Employee.cs

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();
    }
}

csharp

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

csharp

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; }
}

The masked input can convert strings that store data source objects to compatible data types. For instance, the component can convert the “11/09/2022” string to DateTime and DateTimeOffset objects. Use the MaskMode property to manually activate a mask type and convert the string to the corresponding data type.

Refer to the following section for additional information: Apply a Mask.

To change the mask mode at runtime, use the IMaskedInputSettings.MaskMode property instead.

Implements

MaskMode