Feature Request : Numeric Textbox & Trailing Zeros in UI for ASP.NET AJAX

This is a migrated thread and some comments may be shown as answers.

Feature Request : Numeric Textbox & Trailing Zeros

9 Answers 173 Views

Input

This is a migrated thread and some comments may be shown as answers.

MarkInTexas asked on 01 Apr 2009, 05:02 AM

I think a nice feature of the RadNumericTextbox would be to have an additional property for removing trailing zeros.

Currently,

If DecimalDigits=4, lets say

User Enters : 1.2, control looses focus and 1.2000 is displayed. Would prefer to see: 1.2 (Ironically, when control has focus trailing zero are removed).

I can think of a couple ways to accomplish this feature.

1) Add a new property RemoveTrailingZeros to the Formatting object. If true then remove trailing zeros.

2) Even better, would be to enhance format strings (Positive and Negative) and for each different style (Focused, ReadOnly, Enabled etc...) This would provide more flexibility and allow the developer to improve the user experience by having much better control over formatting.

For example, PositivePattern="0.0000" (display trailing zeros) PositivePattern = "0.####" (remove trailing zeros).

I have worked around the issue via some script, but would prefer the control to handle this by default or via format strings.

Thanks for considering this feature request,
Mark.

9 Answers, 1 is accepted

answered on 10 Dec 2009, 11:29 AM

I see there is a KeepTrailingZerosOnFocus property.

So close, if there was a KeepTrailingZerosOnBlur=True/False.

The problem is 2 fold.
1) The number of decimal digits
2) To keep or remove trailing zeros on focus and on blur and display.

Lets say DecimalDigits=3 and KeepTailingZerosOnFocus=false and the new property that does not exist (KeepTrailingZerosOnBlur=true/false) was set to false.

Then the input would work like this

On Page Load
Control would display 1.2, 1.33, 1.123 (Note: no trailing zeros)

User enters 1.200 then leaves control or saves data - Value will be 1.2
User enters 1.230 then leaves control or saves data - Value will be 1.23
User enters 1.234 then leaves control or saves data - Value will be 1.234

The KeepTrailingZerosOnFocus is perfect (if there was another property -> KeepTrailingZerosOnBlur = true/false).
Or fully support number format strings PositiveFormat="0.###"

Note: I solved this problem with some java-script but, would be a whole lot cleaner if control could handle.

Thanks,
Mark.

Accepted

answered on 10 Dec 2009, 02:13 PM

Hello Mark,

Now I see. Well, we can consider implementing this for a future version of the control, based on customer feedback and task priorities. At present you can use the following approach:

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls for ASP.NET AJAX</title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadNumericTextBox ID="RadTextBox1" runat="server">

<NumberFormat DecimalDigits="3" />

<ClientEvents OnValueChanged="MyValueChanged" OnBlur="MyBlur" />

</telerik:RadNumericTextBox>

<script type="text/javascript">

function MyValueChanged(sender, args)

{

var v = args.get_newValue().toString();

ModifyValue(sender, v);

}

function MyBlur(sender, args)

{

var v = sender.get_value().toString();

ModifyValue(sender, v);

}

function ModifyValue(tb, v)

{

if (v.indexOf(".") != -1)

{

var parts = v.split(".");

if (parts[1].length < tb.get_numberFormat().DecimalDigits)

{

window.setTimeout(function(){tb._textBoxElement.value = v;}, 1);

}

</script>

</form>

</body>

</html>

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 11 Dec 2009, 05:37 AM

Thanks Dimo for the code example.

There was 1 test case that did not work.
Enter a value followed by zeros like 1.0 or 1.0000

So I took your code and came up with this.

Works well.

Thanks again,
Mark.

    
            <telerik:RadNumericTextBox ID="RadTextBox1" runat="server"> 
        
            <NumberFormat DecimalDigits="3" /> 
        
            <ClientEvents OnValueChanged="ValueChangeRemoveTrailingZeros" OnBlur="CheckTrailingZeros"  OnLoad="CheckTrailingZeros"/> 
        
            </telerik:RadNumericTextBox> 
        
            <telerik:RadScriptBlock ID="scriptBlock" runat="server"> 
        
            <script type="text/javascript"> 
        
              function ValueChangeRemoveTrailingZeros(sender, args) 
        
              { 
        
                var v = args.get_newValue().toString(); 
        
                RemoveTrailingZeros(sender, v); 
        
              } 
        
              function CheckTrailingZeros(sender, args) 
        
              { 
        
                var v = sender.get_value().toString(); 
        
                RemoveTrailingZeros(sender, v); 
        
              } 
        
              function RemoveTrailingZeros(sender, v) 
        
              { 
        
                sender._textBoxElement.value = v; 
        
              } 
        
            </script>     
        
            </telerik:RadScriptBlock>