Percentage NumericTextBox: possible bind & display format difference

4 posts, 0 answers
  1. Matthew
    Matthew avatar
    33 posts
    Member since:
    Aug 2008

    Posted 26 Mar 2009 Link to this post

    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
  2. Pavlina
    Pavlina avatar
    6187 posts

    Posted 31 Mar 2009 Link to this post

    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.
     <script type="text/javascript">  
            function Blur(sender, args)  
                var input = sender;  
                input.setValue(input.getValue() * 100);  

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

    I hope this information helps.

    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  3. Brock
    Brock avatar
    22 posts
    Member since:
    Mar 2011

    Posted 01 Dec 2011 Link to this post

    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?
  4. Vasil
    Vasil avatar
    1642 posts

    Posted 06 Dec 2011 Link to this post

    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
                return this.Value / 100;
                 base.Value = value * 100;
    Then bind to ofsetValue property.

    All the best,
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top