Keyboard and Mouse Support
In addition to the standard keyboard input, RadMaskedInput controls deliver the convenience of desktop applications with support for arrow-key navigation:
Left/Right arrows - move the cursor one position to the left/right.
Up/down arrows in the RadMaskedInput controls - spin value one step up/down.
Mouse wheel support in the RadMaskedDateTimeInput, RadMaskedNumericInput, RadMaskedCurrencyInput and RadMaskedTextInput controls - spin value one step up/down.
Spin Behavior
The spin behavior in the RadMaskedInput controls could be controlled by setting the SpinMode property.
The SpinMode property is enumeration that exposed the following values:
Position - spins the position affecting only the value on that position. For example if you spin up the last position of the following numeric value in a RadMaskedNumericInput - 999, the result will be 990
PositionAndValue - spins the position affecting the value of the RadMaskedInput control. For example if you spin up the last position of the following numeric value in a RadMaskedNumericInput - 999, the result will be 1000
None - disables the spin behavior
Example 1: Setting the SpinMode property
<telerik:RadMaskedCurrencyInput Margin="0,5,0,10"
Culture="bg-BG"
Mask="c4"
SpinMode="PositionAndValue"/>
The SpinMode property is set by default as follows:
- In RadMaskedTextInput control SpinMode = "None"
- In RadMaskedCurrencyInput control SpinMode = "PositionAndValue"
- In RadMaskedNumericInput control SpinMode = "PositionAndValue"
- In RadMaskedDateTimeInput control SpinMode = "Position"
Sections Tab Navigation
In order to take full advantage of this feature you can set the SectionsNavigationMode property. It is an enumeration of type SectionsNavigationMode and it exposes the following values:
Once (default) - if you set the SectionsNavigationMode to Once, you will be able to Tab through all sections of the RadMaskedInput control until reaching the end and tabbing to the next control
None - if you set the SectionsNavigationMode to None, you won't be able to tab through the RadMaskedInput control's sections
Cycle - if you set the SectionsNavigationMode to Cycle, the Tab key will only cycle through the RadMaskedInput control's sections
If, however, you want to control the Tab navigation in a RadMaskedInput control as a whole without tabbing through the masked input sections, then you can set the SectionsNavigationMode to None.
Below you can find further explanations about the tab navigation between several controls.
Overall Tab Navigation
Once you turn off the sections tab navigation, you can set up the following properties to control the overall tab navigation within a RadMaskedInput control:
IsTabStop - All RadMaskedInput controls derive from the native Control class and therefore they all expose an IsTabStop property. However, when using this property you need to consider the fact that our controls actually are constructed of two native TextBoxes which are placed one over another in their default template. One of them is used to visualize the content of the control when it is not focused. Also, that TextBox can not receive the focus (its IsTabStop property set to False). The other TextBox component (called for short "EditorTextBox") is visualized (and focused) when users try to change the Value of the RadMaskedInput control. Hence, if the native IsTabStop property of the RadMaskedInput control is set to False the control itself will be restricted to receive focus. Please note that users will still be allowed to change the content of the control, since the EditorTextBox will be able to receive the focus.
MaskedInputExtensions.IsEditorTabStop - this property is introduced in the Q3 2013 release and it controls whether the EditorTextBox is allowed to receive the focus.
The following snippet demonstrates how both properties can be used to restrict the second RadMaskedInput control from receiving focus. Note that with the following implementation only one Tab (or Shift + Tab) key stroke is needed to move the focus form the first control to the third one (or vice versa):
Example 2: Setting the IsTabStop and IsEditorTabStop properties
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:maskedInput="clr-namespace:Telerik.Windows.Controls.MaskedInput;assembly=Telerik.Windows.Controls.Input"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
<StackPanel>
<telerik:RadMaskedTextInput SectionsNavigationMode="None" />
<telerik:RadMaskedTextInput IsTabStop="False"
SectionsNavigationMode="None"
maskedInput:MaskedInputExtensions.IsEditorTabStop="False" />
<telerik:RadMaskedTextInput SectionsNavigationMode="None" />
</StackPanel>
</UserControl>
The explanations are true when the SectionsNavigationMode property is set to None.
The following table represents all possible combinations between the two properties and the number of the necessary Tab (or Shift + Tab) key strokes to focus different controls:
| IsEditorTabStop | IsTabStop | Next control | The RadMaskedInput control |
|---|---|---|---|
| True (default) | False (default) | 2 | 1 |
| FALSE | FALSE | 1 | - |
| TRUE | TRUE | 3 | 2 |
| FALSE | TRUE | 2 | - |
Basically, the IsEditorTabStop property controls the focus of EditorTextBox and the native IsTabStop property controls the focus of the RadMaskedInput control itself.