Skip to main content

DxMaskedInputSettings Class

Contains settings of an auto-generated masked input editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.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:

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.

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

Edit row with masked input

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.

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

Edit form with masked input

Runtime Customization

At runtime, call the GetColumnEditSettings<T>(String) method to access settings of a masked input in the specified column. The following code snippet dynamically disables 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();
    }
}

Inheritance

Object
ComponentBase
DevExpress.Blazor.Internal.BranchedRenderComponent
DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent
See Also