Percentage NumericTextBox: possible bind & display format difference

[Matthew]

I have a NumericTextBox that is set to type=percentage, inside of a FormView for databinding. The database stores the percentage field as a decimal number less than or equal to one (0.00 to 1.00). I'd like the user interact with a range between 0 and 100, which is just the database value times 100. I'd also like to keep the databinding as simple as possible, and it needs to be two-way (I know <%# Eval("pct") * 100 %> would work for reading, but I wouldn't be able to save it back to the database). I know there are other solutions, like indirection or manually binding that, but is there any setting existing or planned that can essentially do this translation for the front end?

So that, any time I programmtically reference the field, it is (for example) 0.03, but when the users sees it, it would be 3 %, and they would change it by typing in  "4 %". Is this possible? Anybody found any creative solutions?

Thanks, Matthew

[Pavlina]

Hello Matthew,

You can embed RadInput controls in a data-bound control and use it for editing. When the data-bound control  creates the  RadNumericTextBox control as part of its own rendering, it can extract the input values.
Data-binding expressions are contained within <%# and %> delimiters and use the Eval and Bind functions. The Eval function is used to define one-way (read-only) binding. The Bind function is used for two-way (updatable) binding.
For more information about databinding, please refer to the following article:
Using RadInput Controls inside Data-Bound Controls

RadNumericTextBox exposes simple yet powerful API so that you may manipulate its value using custom client side code. Give a try of the code snippet bellow and let me know if it works for you.
 
JS:

 <script type="text/javascript">
        function Blur(sender, args)
        {
            var input = sender;
            input.setValue(input.getValue() * 100);
        }
      </script>

ASPX:

<telerik:RadNumericTextBox Type="Percent" ID="RadNumericTextBox1" runat="server">
            <ClientEvents OnBlur="Blur" />
        </telerik:RadNumericTextBox>

I hope this information helps.

Greetings,
Pavlina
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Brock]

I have the exact same question as the opening post. I don't feel like the question was answered though... or maybe I'm simply not understanding the answer that was given. I read through the provided link but I'm still not seeing how to achieve the functionality that the opening post described. This is exactly what I need for my project.

I can't just do a javascript multiply by 100 because when you save... that multipled number will be sent to the database. I need the numerictextbox to be appear/ be formatted as a percent but remain a decimal less than one in the database.

Can someone provide additional detail or possibly give an example?

[Vasil]

Hi Brock,

You could make your class that inherits the RadNumericTextBox, and use this class for binding your data.
Here is a sample example:

public class MyNumeric : Telerik.Web.UI.RadNumericTextBox
{
    public double? ofsetValue
    {
        get
        {
            return this.Value / 100;
        }
        set
        {
             base.Value = value * 100;
        }
    }
}

Then bind to ofsetValue property.

All the best,
Vasil
the Telerik team