Masked Text Box

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:

• IncludePromptAndLiterals

• ExcludePromptAndLiterals

• IncludeLiterals

• IncludePrompt

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.

• true — Allows invalid values.

• false — Rejects invalid values based on validation rules.

Configure GridTextColumn

1. Create the FlexGrid Structure

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

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

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

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.

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.

MaskPromptChar="-"

Unfilled positions display -.

Example:

(___)__-___-_

6. Set the FallbackValue Property

Specify a fallback value when input validation or conversion fails.

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.

AllowInvalidValues="true"

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

8. Run and Verify Input Behavior

After configuration:

• Input follows the defined mask.

• Placeholder characters appear during editing.

• Committed values follow the selected MaskFormat setting.

• Invalid values are either accepted or replaced with the fallback value based on configuration.

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

Complete Example

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