DxMaskedInputSettings.MaskProperties Property

Allows you to define mask properties.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment MaskProperties { get; set; }

Property Value

Type	Description
RenderFragment	The mask properties.

Remarks

Populate the MaskProperties property markup with an object that contains mask properties. The type of the object depends on the mask mode (the MaskMode property). The table below lists the available mask modes and the corresponding property objects.

Mask mode	Mask settings object
Numeric	DxNumericMaskProperties
DateTime	DxDateTimeMaskProperties
DateTimeOffset	DxDateTimeOffsetMaskProperties
RegEx	DxRegExMaskProperties
Text	DxTextMaskProperties
TimeSpan	DxTimeSpanMaskProperties

Razor

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

@code {
    private Customer[]? customers;
    protected override async Task OnInitializedAsync() {
        customers = await CustomerData.GetData();
    }
}

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

To configure mask settings at runtime, use the IMaskedInputSettings.MaskProperties property instead.

Implements

MaskProperties