Progress® Telerik® UI for .NET MAUI Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 15 Mar 2023 11:38 by ADMIN
Release 5.1.0
Bernd
Created on: 19 Jan 2023 19:16
Category: MaskedEntry
Type: Feature Request
1
MaskedEntry: Allow setting the Keyboard Type

I would like to set the Keyboard Type the same way as it's possible for the regular Entry (see docs).

The reason is that I have a MaskedEntry with a mask that allows only numeric input. That's why I want to set Keyboard="Numeric".
This is how it should look like in the end:

<telerik:RadTextMaskedEntry
                  x:Name="entry"
                  Keyboard="Numeric"
                  Mask="00:00" />

5 comments
ADMIN
Maria
Posted on: 30 Jan 2023 15:49

Hello Bernd, 

I am happy that the provided solution worked for you. Thank you for the feedback. The feature request is already in development. If passing testing the feature will be available in the next release.

Regards,
Maria
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Bernd
Posted on: 27 Jan 2023 13:33

Hello Maria,

Thank you for the explanation and the provided workaround. I can confirm that it works on Android. I will check if I can apply it in a way that our app works on Android, iOS, and Windows.

Regarding your question about why I'm using the TextMask with numeric input instead of the NumericMask:
First, there is no way to specify a custom mask on the NumericMask control. Secondly, I am not interested in the numeric value. What I need is the entered value as a string, including the literals of the mask.

Our current use case is to enter the time and date (it's a requirement to enter the numbers and not use a date or time picker). In this case, only numeric input is allowed, but the result is a string that can be parsed as date or time.

Other use cases could be an IP address (you created a special control for it, but it's similar, as it allows only numeric input but returns a string) or a phone number in a special format.

I guess there are many other use cases to change the keyboard type to numeric. So I hope you will add this feature to give your customers the freedom to choose the keyboard type they think is best for their needs.

Thanks!

ADMIN
Maria
Posted on: 26 Jan 2023 11:33

Hello Bernd,

Thank you for the provided details.

I tested the app on Android and reproduced the exception. Let me share more details about our Mask control and why the error occurs:

- The mask has different types like Regex, Text, Numeric Email, etc, they are created to cover different scenarios. All mask types are describe dhere: https://docs.telerik.com/devtools/maui/controls/maskedentry/mask-types/overview 

When you override the default template and change the built-in behavior, for your case the TextMask with Numeric keyboard, the logic of the native EditorText control(Android native control), affects the Mask internal logic and the mask behavior changes. In order to workaround this you need an attached property. A sample project is attached. Download and test on your side.

Another solution:

Instead of using the attached property, you can use our NumericInput control or the Numeric Mask. Both controls use Keyboard Numeric out of the box.

I have a question - Could you please share what is the reason to use the TextMask with Numeric keyboard? Do you want to cover some specific case? 

Looking forward to your reply.

Regards,

Maria
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Attached Files:
Bernd
Posted on: 23 Jan 2023 11:17

Hello Maria,

Thank you for the suggested workaround. I have tried it on Windows and Android. On Windows it works, but on Android the app crashes with this exception:

System.InvalidOperationException: 'TextChangeProcessor failed to set text andor cursor position.'

The control template in general works, but the app crashes as soon as I set the Keyboard property to "Numeric" or "Phone". All other keyboard types are working fine, but I need either "Numeric" or "Phone" for my use case.

I tested it with the following configurations:

  • .NET 7
  • Telerik MAUI controls v4 and v5
  • Android emulator with Android 12.1 and 13
  • Real devices with Android 10 and 11

The exception is always the same. Do you have a workaround for this issue too? Thank you!

ADMIN
Maria
Posted on: 20 Jan 2023 14:36

Hello Bernd, 

Thank you for this request. I agree it is a valid request so I have updated its status to "Unplanned". Cast your vote for this item and follow it in order to receive an email notification when its status changes.

As a solution, I can suggest you use the control template of the RadTextMakedEntry and add the Keyboard to the inner RadEntry .Here is the code snippet with the ControlTemplate:

 <ControlTemplate x:Key="MaskedEntry_ControlTemplate">
                <telerikMauiControls:RadEntry AutomationId="MaskedEntryView"
                                      IsValueValid="{Binding IsValueValid, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      ValidationErrorMessage="{Binding ActualValidationErrorMessage, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      IsReadOnly="{Binding IsReadOnly, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      IsEnabled="{Binding IsEnabled, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      Placeholder="{Binding Placeholder, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      FontFamily="{Binding FontFamily, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      FontSize="{Binding FontSize, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      ClearButtonVisibility="{Binding ClearButtonVisibility, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      ClearButtonColor="{Binding ClearButtonColor, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      HoveredClearButtonColor="{Binding HoveredClearButtonColor, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      PressedClearButtonColor="{Binding PressedClearButtonColor, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      BackgroundColor="{Binding EntryBackgroundColor, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      CornerRadius="{Binding EntryCornerRadius, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      TextColor="{Binding TextColor, Source={x:RelativeSource AncestorType={Type telerikMauiControls:RadMaskedEntryBase}}}"
                                      Keyboard ="Numeric">
                </telerikMauiControls:RadEntry>
            </ControlTemplate>
 <telerikMauiControls:RadTextMaskedEntry ControlTemplate="{StaticResource MaskedEntry_ControlTemplate }"
                                            Mask="00:00"/>

I hope this information is useful. If you have any additional questions don't hesitate to write back.

Regards,
Maria
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category