Unplanned
Last Updated: 19 Mar 2020 10:52 by ADMIN
Alan
Created on: 19 Mar 2020 10:44
Category: MaskedInput
Type: Feature Request
0
MaskedInpit: Provide support for keyboard navigation

For example the control ignores IsTabStop and TabIndex properties for keyboard tab navigation. It behaves differently on Android, iOS and UWP.

1 comment
ADMIN
Didi
Posted on: 19 Mar 2020 10:52

Hi Alan,

As a solution you can use the MaskedInput ControlTemplate and set the IsTabStop and TabIndex to the MaskedInputElement, for example:

<ResourceDictionary>
    <ControlTemplate x:Key="MaskedInput_ControlTemplate">
        <primitives:RadBorder>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <telerikInput:MaskedInputElement x:Name="InputElement"
                                            DisplayedTextFont="Arial"
                                            MaskType="Text"
                                            InputValue="{Binding ....., Mode=TwoWay}"
                                            DisplayedText="{Binding ....., Mode=OneWayToSource}"
                                            Mask="999.999.999.999"
                                            Placeholder="_"
                                            IsTabStop="True"
                                            TabIndex="2"     
                                            HorizontalTextAlignment="Start"/>
                <Label FontSize="{TemplateBinding ErrorFontSize}"
                        Grid.Row="1">
                    <Label.Triggers>
                        <DataTrigger TargetType="Label" 
                            Binding="{TemplateBinding IsMaskFull}"
                            Value="False">
                            <Setter Property="Text" Value="{TemplateBinding InvalidInputErrorText}" />
                        </DataTrigger>
                        <DataTrigger TargetType="Label" 
                            Binding="{TemplateBinding IsMaskFull}"
                            Value="True">
                            <Setter Property="Text" Value="{TemplateBinding RejectedSymbolErrorText}" />
                        </DataTrigger>
                        <DataTrigger TargetType="Label"
                            Binding="{TemplateBinding IsErrorTextVisible}"
                            Value="True">
                            <Setter Property="TextColor" Value="{TemplateBinding ErrorColor}" />
                        </DataTrigger>
                        <DataTrigger TargetType="Label"
                            Binding="{TemplateBinding IsErrorTextVisible}"
                            Value="False">
                            <Setter Property="TextColor" Value="Transparent" />
                        </DataTrigger>
                    </Label.Triggers>
                </Label>
            </Grid>
        </primitives:RadBorder>
    </ControlTemplate>
</ResourceDictionary>

<telerikInput:RadMaskedInput 
                                Margin="1"
                            ControlTemplate="{StaticResource MaskedInput_ControlTemplate}"
                            />

Regards,
Didi
Progress Telerik