How to remove the GroupSeparator in Telerik’s RadNumericUpDown?

If you are a Silverlight developer and working with Telerik’s Rad control library, you might have seen that the RadNumericUpDown control always displays the value with a comma separator as per your system’s locale settings.

But have you ever came to a situation where your client wants to remove the comma separator from the control? You will not find any properties in-built in it. Let’s start today’s discussion with it.

Today in this post we will learn how to remove the comma separator from the Telerik’s RadNumericUpDown control. You can see a screenshot below where the Numeric input box uses the comma separator by default (left) and another Numeric input box which does not use any separator (right). Let’s start implementing the same for our demo.

Let’s create a Behavior of type RadNumericUpDown control which we will be able to plug into the Numeric UpDown control wherever we need it. To create a behavior, you must have to add the reference of “System.Windows.Interactivity.dll” in your project. Then create a class named “GroupSeparatorBehavior” and inherit “Behavior<RadNumericUpDown>”.

The next step is to override the OnAttached() method and assign NumberFormatInfo property with a new instance and set it’s NumberGroupSeparator property to empty string.

Here is the code snippet of the behavior class that we created just now:

public class GroupSeparatorBehavior : Behavior<RadNumericUpDown>
{
    protected override void OnAttached()
    {
        base.OnAttached();
 
        AssociatedObject.NumberFormatInfo = new NumberFormatInfo { NumberGroupSeparator = "" };
    }
}

Now to hook the above behavior to your RadNumericUpDown control, first you need to add the XMLNS namespace to the XAML page as shown below:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

Remember that, it should point to the System.Windows.Interactivity dll reference as mentioned above or you can directly provide the assembly and namespace information to it.

Now hook the behavior to the control as shown below:

<telerik:RadNumericUpDown Minimum="0" Maximum="500000" Value="450000"
                          NumberDecimalDigits="0"
                          Height="26" Width="100">
    <i:Interaction.Behaviors>
        <radNumericDemo:GroupSeparatorBehavior/>
    </i:Interaction.Behaviors>
</telerik:RadNumericUpDown>

Now once you run the Silverlight application, you will not see the Number Group Separator i.e. comma any more to the RadNumericUpDown control that you specified by attaching the behavior.

I hope that, this small post was useful to you to learn and implement the said behavior in your application. Have any queries? Don’t hesitate to ask me below. Happy Coding. Cheers!