# Masked Text Box

## Content

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.

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

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

```auto
Mask="(000)00-000-0"
```

This pattern requires numeric input in the specified structure.
Example display while typing:

```auto
(123)45-678-9
```

### 4\. Set the MaskFormat Property

Specify how the committed value is stored.

```auto
MaskFormat="MaskFormat.ExcludePromptAndLiterals"
```

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

```auto
(123)45-678-9
```

Committed value:

```auto
123456789
```

### 5\. Configure the MaskPromptChar Property

Specify the placeholder character displayed during editing.

```auto
MaskPromptChar="-"
```

Unfilled positions display `-`.
Example:

```auto
(___)__-___-_
```

### 6\. Set the FallbackValue Property

Specify a fallback value when input validation or conversion fails.

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

```auto
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**

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