Skip to main content
All docs
V25.1
  • DxMaskedInputSettings Class

    Contains settings of an auto-generated masked input editor.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    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.

    <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 inline or pop-up edit form. Call the GetEditor 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 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