DxMaskedInputSettings Class

Contains settings of an auto-generated masked input editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Remarks

The DxMaskedInputSettings class contains settings that Grid uses to generate masked input editors.

The Grid component automatically generates 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:

• Numeric
• DateTime
• DateTimeOffset
• TimeSpan
• String

If you specify the masked input settings for a column containing values of another type, the settings have no effect and the Grid 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

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

EmployeeService.cs

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

Customer.cs

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 edit form or popup edit form. Call the GetEditor(String) method to get the column editor in the edit form template.

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

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

Runtime Customization

At runtime, call the GetColumnEditSettings<T>(String) method to access settings of a masked input in the specified column. The example below demonstrates how to dynamically disable the editor.

<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

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

IMaskedInputSettings

IButtonEditSettings

ITextEditSettings

IEditSettings

Inheritance

Object

ComponentBase

DevExpress.Blazor.Internal.BranchedRenderComponent

DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent

DxEditSettings

DxTextEditSettings

DxButtonEditSettings

DxMaskedInputSettings