DxMaskedInputSettings Class

Contains settings of an auto-generated masked input editor.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxMaskedInputSettings :
    DxButtonEditSettings,
    IMaskedInputSettings,
    IButtonEditSettings,
    ITextEditSettings,
    IEditSettings

Remarks

The DxMaskedInputSettings class contains settings that Grid and TreeList use to generate masked input editors.

Grid and TreeList components automatically generate editors for columns based on their data types. You can replace the default column editor with the masked input editor for columns of the following data types:

If you specify the masked input settings for a column containing values of another type, these settings have no effect and the Grid or TreeList renders a read-only text box editor instead.

Auto-Generated Masked Input in Filter Row and Edit Cells

Specify a DxMaskedInputSettings object in a column’s EditSettings property to replace the default column editor with a masked input editor in the filter row and in data rows during edit operations.

Razor
EmployeeService.cs
Customer.cs

razor

<DxGrid Data="@customers" PageSize="6" KeyFieldName="ID"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ContactName" />
        <DxGridDataColumn FieldName="Company" />
        <DxGridDataColumn FieldName="Country" />
        <DxGridDataColumn FieldName="BonusCode" DisplayFormat="BONUS-{0}" >
            <EditSettings>
                <DxMaskedInputSettings MaskMode="MaskMode.Text" Mask="BONUS-0000" >
                    <MaskProperties>
                        <DxTextMaskProperties SaveLiteral="false" />
                    </MaskProperties>
                </DxMaskedInputSettings>
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

csharp

public class CustomerService {
    public Task<Customer[]> GetData() {
        List<Customer> customers = new List<Customer>();

        customers.Add(new Customer() { ID = 00156, ContactName = "Maria Anders", Company = "Alfreds Futterkiste", Country = "Germany", BonusCode = "4562", });
        customers.Add(new Customer() { ID = 01200, ContactName = "Ana Trujillo", Company = "Ana Trujillo Emparedados y helados", Country = "Mexico", BonusCode = "1183", });
        customers.Add(new Customer() { ID = 00567, ContactName = "Antonio Moreno", Company = "Antonio Moreno Taquería", Country = "Mexico", BonusCode = "1125", });
        customers.Add(new Customer() { ID = 00168, ContactName = "Thomas Hardy", Company = "Around the Horn", Country = "UK", BonusCode = "1046", });
        customers.Add(new Customer() { ID = 01290, ContactName = "Christina Berglund", Company = "Berglunds snabbköp", Country = "Sweden", BonusCode = "1253", });
        customers.Add(new Customer() { ID = 00938, ContactName = "Hanna Moos", Company = "Blauer See Delikatessen", Country = "Germany", BonusCode = "4217", });
        customers.Add(new Customer() { ID = 01098, ContactName = "Frédérique Citeaux", Company = "Blondesddsl père et fils", Country = "France", BonusCode = "6297", });
        customers.Add(new Customer() { ID = 03027, ContactName = "Martín Sommer", Company = "Bólido Comidas preparadas", Country = "Spain", BonusCode = "0026", });
        customers.Add(new Customer() { ID = 00633, ContactName = "Laurence Lebihan", Company = "Bon app'", Country = "France", BonusCode = "5361", });
        return Task.FromResult(customers.ToArray());
    }
}

csharp

public class Customer {
    public int ID { get; set; }
    public string ContactName { get; set; }
    public string Company { get; set; }
    public string? Country { get; set; }
    public string? BonusCode { get; set; }
}

Auto-Generated Masked Input in Edit Forms

You can display an auto-generated column editor in the inline or pop-up edit form. Call the GetEditor method to get the column editor in the edit form template.

Razor
EmployeeService.cs
Employee.cs

razor

@inject EmployeeService EmployeeData

<DxGrid Data="@employees" PageSize="4"
        EditMode="GridEditMode.EditForm" KeyFieldName="ID"
    <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>
    <EditFormTemplate Context="EditFormContext">
        <DxFormLayout >
            <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("FirstName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("LastName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Birth Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("BirthDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("HireDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="E-mail:" ColSpanMd="12">
                @EditFormContext.GetEditor("Email")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</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; }
}

Runtime Customization

At runtime, call the GetColumnEditSettings method to access settings of a masked input in the specified column. The following code snippet dynamically disables the editor.

razor

<DxGrid @ref=grid Data="@customers" KeyFieldName="ID" EditMode="GridEditMode.EditRow" >
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ContactName" />
        <DxGridDataColumn FieldName="Company" />
        <DxGridDataColumn FieldName="Country" />
        <DxGridDataColumn FieldName="BonusCode" DisplayFormat="BONUS-{0}" >
            <EditSettings>
                <DxMaskedInputSettings MaskMode="MaskMode.Text" Mask="BONUS-0000" >
                    <MaskProperties>
                        <DxTextMaskProperties SaveLiteral="false" />
                    </MaskProperties>
                </DxMaskedInputSettings>
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
</DxGrid>
<DxButton Text="Disable the Bonus Code" Click="Button_Click" />

@code {
    IGrid grid { get; set; }
    private Customer[]? customers;
    protected override async Task OnInitializedAsync() {
        customers = await CustomerData.GetData();
    }
    void Button_Click() {
         var settings = grid.GetColumnEditSettings<IMaskedInputSettings>("BonusCode");
         grid.BeginUpdate();
         settings.Enabled = false;
         grid.EndUpdate();
    }
}

Implements

Inheritance

Object ComponentBase DevExpress.Blazor.Internal.BranchedRenderComponent DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent DxEditSettings DxTextEditSettings DxButtonEditSettings DxMaskedInputSettings