Hi,
We started development with Infragistics IgniteUI v14.x and are now on v15.2 and we are no longer seeing some functionality previously present in v14 for igCurrencyEditor.
In past versions of the library, igCurrencyEditor would round values to the maxDecimal length and would not allow users to input more than maxDecimals decimal value.For example, in v14.x, if we set maxDecimals = 5, input was limited to that many decimals (ex. x.xxxxx) and would not allow an input of 0.123456789, but programmatically setting the value by calling $element.igCurrencyEditor("value", 0.12345999) would round the value to 0.12346.
We are no longer seeing this in 15.2. Instead, the igCurrencyEditor allows input of any length and simply truncates the value to 0.12345, without rounding.
Was the removal of these features intentional? If so, what was the reasoning behind it?Is there any plan to add this functionality back into the editor?Or, is there a workaround, so we can return to the past functionality?
Thank you.
Thank you for posting in the Infragistics community !
First, let me know that with 15.2 release all Ignite UI editors have been re-architected to optimize their usability. Thus the behavior of the maxDecimals property was changed as per your observations show. This change is by design and is the expected behavior of the new editors suite. If you want to keep the other behavior , you can achieve this using the following workaround, which rounds the value in the valueChanging event:
$("#federalTax").igCurrencyEditor({ listItems: listValues, maxDecimals: 4, value: 600, valueChanging: function (evt, ui) { var pos = ui.owner.options.maxDecimals; num = parseFloat(ui.editorInput.val()); ui.newValue = Math.round(num * Math.pow(10,pos)) / Math.pow(10,pos); ui.owner.value(ui.newValue); }});
Please let me know if you have further questions on the matter, I will be glad to help.
Thank you for your suggested code. However, it seems to round correctly and set the internal value correctly, but the formatted displayed value for the editor never updates to the rounded value.
Based on your own JSFiddle examples, I have created one with the code you suggest. To see it in action, enter 0.12345999 into the textbox, then click out of it. If you open the console, you will see that the actual value for the editor changed to 0.12346, but the displayed value still shows $0.12345. If you edit the textbox again, the edited value will again display 0.12345.
How can we permanently set the underlying value and have the displayed value update correctly?
Tracking down the actual issue, I was able to get it working properly.
Your workaround code assumes that ui.newValue is passed by-reference and can simply be updated within the event. This is not true, as the inherited private method igTextEditor._triggerInternalValueChange() passes the variable to the event by-value, then proceeds to call two other methods, which were using the original input value and truncating it for the formatted display value.
Like a few other IgniteUI controls, I had to override the class and redefine the method in order to have it perform the way I wanted. Granted, this works for the valueChanging() event, but I also need to catch the case when we programmatically set the value as well...
For anyone else whom might need this at a later time, this is how I did it:
$(function () { // redefine the igCurrencyEditor widget to override methods // with our own functionality $.widget("ui.igCurrencyEditor", $.ui.igCurrencyEditor, {
_triggerInternalValueChange: function (value) { // wrap value in an object so we can pass by-reference var valueRef = { ref: value }; var noCancel = this._triggerValueChanging(valueRef); // pull the reference value back out and //continue passing it along value = valueRef.ref; if (noCancel) { this._processInternalValueChanging(value); this._triggerValueChanged(value) } }, }); $("#medicare").igCurrencyEditor({ allowNullValue: true, dataMode: 'double', maxDecimals: 5, minDecimals: 5, scientificFormat: false, selectionOnFocus: 'selectAll', spinDelta: 0, suppressNotifications: true, textAlign: 'right', valueChanging: function (evt, ui) { var pos = ui.owner.options.maxDecimals; num = parseFloat(ui.editorInput.val()); // use ui.newValue.ref, rather than // ui.newValue, to utilize the reference we // set up in the igCurrency Editor override ui.newValue.ref = Math.round(num * Math.pow(10,pos)) / Math.pow(10,pos); ui.owner.value(ui.newValue.ref); } }); });
Thanks
I am glad you have managed to resolve the issue and thank you for sharing it with the Infragistics community !
As a last note to any future person who cares...
The actual issue was occurring in the private method igNumericEditor._parseNumericValueByMode(). It was parsing the value as a string by dividing it into integer and fractional parts and substring()ing the fraction if the length exceeded maxDecimals, then rejoining the two halves. Overriding this method was the actual fix we implemented, as the previous resolution with _triggerInternalValueChange() wasn't curing all scenarios we tested.