Blazor コントロール
マスク入力
コントロール > FlexGrid > > マスク入力

The GridTextColumn class extends the text editing capabilities of FlexGrid by adding support for masked input and validation. It enables structured text entry directly within editable grid cells by enforcing formatting rules during user input.

Masked input is useful when values must follow a specific pattern, such as phone numbers, account numbers, product codes, or identifiers. Applying a mask helps maintain consistent formatting and reduces manual input errors.

Properties

Mask

Specifies the input pattern used during editing. The mask can include numeric placeholders, literals, and symbols to guide user input.

MaskFormat

Specifies how the committed value is stored by determining whether literals and prompt characters are included.

Available values include:

MaskPromptChar

Specifies the placeholder character displayed for incomplete input positions while editing.

FallbackValue

Specifies the value used when the entered input cannot be converted to a valid value during commit operations.

AllowInvalidValues

Determines whether invalid values are accepted during commit operations.

Configure GridTextColumn

1. Create the FlexGrid Structure

Create a FlexGrid control and disable automatic column generation so that columns can be defined manually.

Razor
コードのコピー
<FlexGrid ItemsSource="customers"  AutoGenerateColumns="false">

Disabling automatic column generation provides full control over column types and settings.

2. Bind the GridTextColumn

Add a GridTextColumn and bind it to a textual field.

Razor
コードのコピー
<GridTextColumn Binding="TelephoneNo">

The Binding property connects the column to the LastName field in the data source.

3. Apply the Mask Property

Define the required input format.

Razor
コードのコピー
Mask="(000)00-000-0"

This pattern requires numeric input in the specified structure.

Example display while typing:

(123)45-678-9

4. Set the MaskFormat Property

Specify how the committed value is stored.

Razor
コードのコピー
MaskFormat="MaskFormat.ExcludePromptAndLiterals"

This setting removes formatting symbols and prompt characters from the committed value.

Example:

Displayed value:

(123)45-678-9

Committed value:

123456789

5. Configure the MaskPromptChar Property

Specify the placeholder character displayed during editing.

Razor
コードのコピー
MaskPromptChar="-"

Unfilled positions display -.

Example:

(___)__-___-_

6. Set the FallbackValue Property

Specify a fallback value when input validation or conversion fails.

Razor
コードのコピー
FallbackValue="0"

If conversion fails during commit, the grid uses 0.

7. Configure AllowInvalidValues

Allow invalid values during commit operations when validation is handled elsewhere in the application.

Razor
コードのコピー
AllowInvalidValues="true"

This is useful when validation occurs later in the application workflow.

8. Run and Verify Input Behavior

After configuration:

This configuration provides a controlled and user-friendly text entry experience in FlexGrid.

Complete Example

Razor
コードのコピー
<FlexGrid ItemsSource="customers"  MinColumnWidth="85"  AutoGenerateColumns="false"  Style="@("max-height:50vh")">
    <FlexGridColumns>
        <GridTextColumn Binding="TelephoneNo"  Mask="(000)00-000-0"  MaskFormat="MaskFormat.ExcludePromptAndLiterals"  MaskPromptChar="-"  FallbackValue="0"  AllowInvalidValues="true">
        </GridTextColumn>
    </FlexGridColumns>
</FlexGrid>