Restrict user to hex values in a grid control

[Priya]

I want to be able to restrict the user to entering only hex values in RadGridView rows.

Also, ideally the control creates a single space between hex values.

Any ideas?

Thank you in advance.

 

Example : 41 78 FF FD

 

[Martin Ivanov]

Hello Priya,

One way to achieve your requirement is to use the GridViewMaskedInputColumn  which internally uses RadMaskedInput as the editor for the cells. For your case, you can set the MaskType to Standard which will generate RadMaskedTextInput control. Then you can set the Mask property of the column to something like "A2 A2 A2 A2". You can see the available mask tokens in the RadMaskedInput help documentation.

I hope this information helps.

Regards,
Martin Ivanov
Progress Telerik

[Priya]

Hello Martin,

Thank you for the reply.

After going through the documentation for the RadMaskedInput, I did not find a Mask value that would satisfy my needs.

- Using "A" sets it to Alphanumeric while I really need [0-9,a-F,A-F]

- The user should be able to enter unlimited amount of data (not just 4 bytes as I had in my example, in other words "A2 A2 A2 A2 will not work).

- I need to display the value in uppercase rightaway even when the user types in lower case. eg: "09 Ff" would always show up as "09 FF"

- I would also like to add a space (and move the cursor over) as soon as the user has typed in the second nibble. eg: Add space and move cursor as soon as user has typed "00 FF" , but not when the  user has typed "00 F"

Are these my options: 

a) Creating a new ITokenValidationRule

b) Adding a handler for OnTextChanged(...)

https://www.telerik.com/forums/no-uppercase-input-when-updatevalueevent-is-lostfocus

If they are, which one would work for my usecase?

Thanks in advance.

[Martin Ivanov]

Telerik doesn't have an input control that provides all those features out of the box. To achieve your requirement, you can use RadMaskedTextBox and manually validate and update the entered Value on ValueChanged or ValueChanging. You can use the events also to change the text casing (all uppercase). 

[Priya]

Hello,

I tried the following as per your suggestion,

        <telerik:RadMaskedTextInput Mask="" IsClearButtonVisible="False" SelectionOnFocus="CaretToEnd"
                                                    TextMode="PlainText" maskedInput:MaskedInputExtensions.AllowNull="True"
                                                    Value="{Binding Path=Name}"
                                                    MinWidth="60" Margin="10,10,10,10" ValueChanging="RadMaskedTextInput_ValueChanging" ValueChanged="RadMaskedTextInput_ValueChanged" maskedInput:ValidationHelper.DisplayValidationErrors="True"/>

 

        private void RadMaskedTextInput_ValueChanging(object sender, Telerik.Windows.Controls.MaskedInput.RadMaskedInputValueChangingEventArgs e)
        {
            var tb = sender as RadMaskedTextInput;
            tb.Value = (e.NewValue as string).ToUpper();
        }

My intention here is to see if I can convert the entered into uppercase and set it back to the control. However, the control still displays the lower case value. What am I doing wrong?

Also, how can I indicate (via ValueChanging) that the entered value is incorrect ( for example, a non-hex character) ?

[Dilyan Traykov]

Hello Priya,

Thank you for the provided code snippets.

Based on them, I set up a small sample project, however, the input is correctly transformed to uppercase at my end by handling the ValueChanging event as you've done. Can you please have a look and let me know if I'm missing something of importance?

As for validating if the provided value is a valid HEX character, you can use the Regex Validation mechanism of the control and define the following regex: "^#?([A-F0-9]{6}|[A-F0-9]{3})$". Please note that I've also set the AllowInvalidValues property of the control to True. This ensures that the ValueChanging event is fired on each key stroke. In the event, you can check the IsMaskValid property of the control and perform further logic.

I've gone ahead and also demonstrated this in the sample project as well. Please have a look and let me know if you find this helpful.

[Priya]

Hi Dilyan,

Thank you for the code sample.

The ValueChanging works as expected - I am not sure what I was doing wrong before. Anyway, that part works.

For some of the controls I need to do some additional validation (such as comparing entered data vs what is in the backend). As such, I would probably not use the ValidationRegex property but instead do the validation in ValueChanging event.

With that said,  if the user has entered invalid data, in the ValueChanging event handler, how do I indicate that the data is invalid (in other words how do I set the "red outline" that the data is invalid)? Also, is there a way to use multiple colors for the outline ( red for invalid, yellow for warning... etc)?

 

[Priya]

Hi Dilyan,

In a different area of the project, I want to define a control that does the following

1) Prevent users from entering non-hex values. If a user enters a non-hex value ignore the value and don't display the value in the control.

2) Automatically uppercase any a-f chars that have been entered.

3) Automatically add a space after every 2 bytes : Example, once the user has typed in the last digit 6, automatically add a space and move the cursor ready for the next entry : 56 F7 86 

I have following control definition

       <telerik:RadMaskedTextInput Mask="" IsClearButtonVisible="False" SelectionOnFocus="CaretToEnd"
                                                    TextMode="PlainText" maskedInput:MaskedInputExtensions.AllowNull="True" LostFocus="RadMaskedTextInput_LostFocus"
                                                    Value="{Binding Path=Name}" UpdateValueEvent="PropertyChanged"
                                                    MinWidth="60" Margin="10,10,10,10" ValueChanging="RadMaskedTextInput_ValueChanging" ValueChanged="RadMaskedTextInput_ValueChanged"/>

        private void RadMaskedTextInput_ValueChanging(object sender, Telerik.Windows.Controls.MaskedInput.RadMaskedInputValueChangingEventArgs e)
        {
            // Input format : 87 9F AC 70
            var tb = sender as RadMaskedTextInput;
            var v = (e.NewValue as string);
            v = v.Replace(" ", string.Empty); // Get rid of spaces
            v = v.ToUpper(); // Convert value to upper case
            v = string.Concat(v.Where(x => Char.IsNumber(x) || (x >= 'A' && x <='F')).ToArray()); // Discard everything that is not a Hex char
            v = Regex.Replace(v, ".{2}", "$0 "); // Add spaces after every 2 chars
            tb.Value = v; // Set the new value back to the control
        }

I have it mostly working except for one weird behavior in the control.

Any a - f chars automatically show up in upper case. The space gets added after every 2 bytes. All good. However, if I enter an invalid char (for example : 'q'), the invalid char is filtered out in the code ( tb.Value = v;). but, the control still continues to display the invalid value (see picture below).

What is even more weird is subsequently if I enter a valid char ( for example a 1), the invalid char q is erased and replaced by 1. 

If the subsequent char is also invalid (eg: 'w'), then everything is erased

The expected behavior is that invalid char never shows up in the control. Your help is much appreciated. Thank you.

[Dilyan Traykov]

Hi Priya,

To prevent the input of invalid characters, you can handle the ValueChanging event, like so:

            if (v.Any(x => !Char.IsNumber(x) && !(x >= 'A' && x <= 'F')))
            {
                e.Handled = true;
            }

As for displaying a different outline in different colors, you can create a style trigger for the control based on which you can change its BorderBrush property.

Regarding your initial inquiry about the validation of the control - at this point, I believe that it would be best to transfer this logic from the ValueChanging event handler to the ViewModel as demonstrated in the Data Validation demo from our SDK Samples Browser.

For your convenience, I'm attaching the project so that you can get an idea of how the validation can be performed.

I hope you find all of this information helpful.