precision / decimal places / trailing zeros / width

[Jay Faulkner]

Hello,

I would like to use the numeric text box, but there seems to be an issue with it not retaining one or more trailing digits when using a large number with a lot of decimal places.  For instance, if I try the following (see attached HTML file), I see the value 100,000,000,000,000.00 in the numeric text box as if the remaining digits are simply hidden since they don't all fit within the width of the text box.  However, when I click on the text box, the number switches to 100000000000000 with no decimal digits at all.  If I add the width property, regardless of the number of pixels I use, it's like all the text boxes revert to standard (non-syncfusion) input boxes with no rounded corners, styling, "%" or "$", or spin buttons, and the visible width doesn't change at all (something to do with the table and styling perhaps?).  I got the same results in Firefox and Chrome.

            $("#unitCalc").ejNumericTextbox({

                watermarkText: "Units", // sets watermark in numeric

//width: 500px,

decimalPlaces: 12,

incrementStep: 1.001,

enableStrictMode: false,

showRoundedCorner: true,

showSpinButton: false,

validateOnType: true,

                value: 100000000000000.000000000001, // sets value 

                minValue: -7.000000000001, // sets min value 

                maxValue: 200000000000000.000000000001 // sets max value

            });

I realize this is an extreme example, since 0.000000000001 is negligible relative to 100000000000000.0, but I have a need for a numeric text box that can handle very large and/or very small floating point numbers.  I need a lot of decimal places when representing small numbers.  If possible, I could perhaps alter the number of decimal places when the values switch from large to small or vice versa.  It would also be nice if the trailing zeros could be trimmed while still retaining the set number of decimal places if and when they are actually needed. So, my questions:

1.  Why aren't the decimal digits visible when I click on the text box in the above example, and why does the width not appear to work?

2.  Is it possible to prevent the commas from showing up, that is, to see 100000000000000.000000000001, rather than 100,000,000,000,000.000000000001?

3.  Is it possible to trim trailing zeros, but retain the set number of decimal places?  So entering 100000000000000.00000000000 would end up as 100000000000000.0 or 100000000000000, but 100000000000000.000000000001 would remain the same?

4. Can I actively change the number of decimal places when the value size changes?

Thanks for your help!

Jay

Attachment: numericTextBox_ac5f0181.zip

[Karthik Ravichandran]

Hi Jay, 

 

Thanks for contacting syncfusion support. 

 

Query 1:  Why aren't the decimal digits visible when I click on the text box in the above example, and why does the width not appear to work? 

 

We have checked your query. we would like to inform you that, textbox width will not be change as per the value length. You can customize the width using “width” API in ejNumericTextbox. 

 

Query 2:  Is it possible to prevent the commas from showing up 

 

You can achieve your requirement by using the groupSeparator API in ejNumericTextbox. Please refer the below code block. 

 

$("#unitCalc").ejNumericTextbox({ 

    watermarkText: "Units", // sets watermark in numeric 

       //width: 100px, 

       decimalPlaces: 12, 

       incrementStep: 1.001, 

       enableStrictMode: false, 

       showRoundedCorner: true, 

       showSpinButton: false, 

       validateOnType: true, 

    groupSeparator : "", 

    value: 100000000000000.000000000001, // sets value  

    minValue: -7.000000000001, // sets min value  

    maxValue: 200000000000000.000000000001, // sets max value 

    focusIn : "onFocusOut" 

}); 

 

 

Query 3: Is it possible to trim trailing zeros, but retain the set number of decimal places. 

Query 4: Can I actively change the number of decimal places when the value size changes? 

 

You can achieve your requirement by providing decimalPlaces value as -1. We have provided this option from our latest version 15.3.0.29. So, kindly please upgrade your version to 15.3.0.29 to use this feature in your side. 

 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Karthik R 

[Jay Faulkner]

Hi, thanks for your response.  When I read through the documentation, it wasn't immediately clear to me that groupSeparator was adding the commas by default.  My width property wasn't working because I failed to put the pixel value in quotes.  However, there is still an issue with the text box switching to what appears to be an integer when I click on it, even though decimalPlaces is specified and are shown when the widget is not selected.  What is causing that?

Also, I tried using -1 for decimalPlaces with version 15.3.0.29 and it does seem to clip trailing zeros, which is nice.  However, if I modify the contents of the text box such that the decimal point is removed, it will not allow me to add it back in.  But, when I deselect the text box, it shows two zeros after a decimal point that can't be modified with mouse and keyboard.  This behavior makes no sense to me.  If this is not a bug, can you please explain why this happens?  Thanks!

Jay

[Karthik Ravichandran]

Hi Jay, 

 

Thanks for your update. 

 

Query 1: what appears to be an integer when I click on it, even though decimalPlaces is specified and are shown when the widget is not selected.  What is causing that? 

 

In ejNumericTextbox, we have maintained two textboxes (element and hidden input), In the hidden input, we have maintained the formatting values as per the globalization standard and in element we have maintained unformatted parsed value. As per the use interactions, we have switched the textbox states.  

When the control is get focus, we have displayed the element value, i.e. unformatted and parsed value and when it gets focused out, we have displayed the hidden input i.e. Formatted value as per the culture 

This is the default behavior of ejNumericTextbox. 

 

Query 2:  If I modify the contents of the text box such that the decimal point is removed, it will not allow me to add it back in 

 

For this query, we have created the separate incident under your account, please tract that incident for further details. 

Please let us know if you have any concerns. 

 

Regards, 

Karthik R 

[Jay Faulkner]

Hi,

I received a patch for the issue that was preventing the decimal from being re-added after it had been removed when using decimalPlaces set to -1.  That issue appears to be fixed, thank you.  However, I'm still having issues with the input value being changed to something other than what I input.  For example, if I create a numeric textbox as follows and change the input to 0.000005, the value remains the same (0.00000500) when the focus changes.  However, if the 5 is moved to the 7th decimal digit as 0.0000005, the value changes to 5.00000000 when the focus changes.  This happens whether the decimalPlaces property is -1 or >=7.  Why is this happening?  I am using version 15.3.0.29 with the supplied patch in place.

$(function () {

        $("#unitCalc").ejNumericTextbox({

                watermarkText: "Units",

width: "400px",

decimalPlaces: 8,

incrementStep: 1.0000001,

enableStrictMode: false,

showRoundedCorner: true,

showSpinButton: false,

validateOnType: true,

groupSeparator : ",", 

                value: 10.0000001,

                minValue: -10.0000000

            });

});

Also, I've notice that it is not possible to click-drag to highlight and select individual digits to be modified.  Is there any intention on supporting this feature?

Thanks

[Karthik Ravichandran]

Hi Jay, 

 

Thanks for your update. 

 

Query 1: I’m still having issues with the input value being changed to something other than what I input 

 

For this query, we have created the separate incident under your account. Please track that incident for further details. 

 

Query 2: I've notice that it is not possible to click-drag to highlight and select individual digits to be modified.  

 

We would like to inform you that, while click inside the textbox, control will be focused and value gets selected. It is the default behavior of ejTextboxes. You can achieve your requirement (“click-drag to highlight and select value”) by removing the value selection in focus event. Please refer the below code block. 

 

[script] 

function onControlFocus(args){ 

var valueLen = this._textBox.value.length; 

this._textBox.setSelectionRange(valueLen,valueLen); 

} 

 

For your convenience, we have prepared the sample, please refer the below link 

http://jsplayground.syncfusion.com/kdcnp0f4 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Karthik R