v17.2
We have a system that use Infragistics controls to allocate funds. Over the years we assign amounts by specifically allocating from a pool. Now a request has come to allow allocation by a percentage.
So I have a label that displays a pool a funds. Say $120. The managers can add in $24 to represent 20% of the pool. I want to allow users to type in 20%, but then translate it to the correct amount in dollars.
I see that with v17.2 the "includeKeys" options is no longer exposed and cannot be overridden. How can I allow users to type in a percent sign that I can translate into actual dollar amount for the numeric editor?
Hello Karthik,
Thank you for contacting the Infragistics support!
The ‘includeKeys’ option was indeed removed in the new editors. In order to meet your scenario, I can suggest two approaches:
You may use the igTextEditor, instead, in order to handle the input. Or what I think is better – you can update the numeric editor’s source code in order to allow the ‘%’ sign. As the editors are included in the open source Ignite UI package, you can get the latest version from github ( github.com/.../infragistics.ui.editors.js ).
Inside the ‘_initialize’ internal method of the igNumericEditor you may find the ‘numericChars’ variable:
var numericChars = "0123456789"
You would add the percent sign to the list of digits.
I hope this would be suitable for your scenario.
Please, let me know if you face any troubles implementing this or in case you have any other questions.
Thank you once more for using Ignite UI!
Any updates to this? I cannot seem to get it working based on your suggestion.
Thank you for your patience!
You are right that the input is parsed by the selected numeric mode. This is expected, as this is a numeric editor. What I can suggest is – after adding the % sign to the ‘numericChars’ variable to allow the user to enter it inside the input, you may attach to the ‘blur’ event of the igNumericEditor and after that event is fired – you would get the value inside the input using
ui.editorInput.val()
This would look like this:
$("#numericEditor").igNumericEditor({ blur: function (evt, ui) { var actualValue = ui.editorInput.val(); } });
After getting the actual value that includes the % sign – you would manipulate the result the way you need.
However, keeping the percent sign inside the editor after validation would be considered as bad practice because this would introduce unexpected behaviors.
If you decide that you need to have the percent sign persisted – you may use the igTextEditor and handle the input the way you want or you can use an igPercentEditor and get the value you need from it.
The solution I would recommend least, however – you would be able to use it as the igEditors are open source, is to change the logic that handles the input value change. You would update the ‘_processValueChanging’ function where the value is parsed using ‘_parseNumericValueByMode()’.
If you have any additional questions related to this scenario – please let me know!
Best regards, Alexander Marinov
Does the same functionality work if the numeric editor is part of a grid?