igNumericEditor percentage

Any updates to this?  I cannot seem to get it working based on your suggestion.

Hello Karthik,

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

Its perfectly fine to omit the percent sign, I just need it when I pull the value out so I can translate it.

I was unable to get the example working but then I noticed something.  I updated the ig/modules/infragistics.ui.editors.js file.  But when I check fiddler, I am using the infragistics.lob.js and I see a duplicate definition in there for editors.  What is the difference between those files?

After I made the same change to the LOB, the percent sign showed up and your example now works.

I just need to apply it to a numeric editor in the grid.  So I'll try to get that working.

I got it working!

In the igGridUpdating event cellstarted, I attached a new handler to allow that specific editor to use percertages by doing the following:

 var editor = $(ui.editor).data("igNumericEditor");
                        editor._includeKeysArray.push("%");

                    $(ui.editor).on("keypress", $.proxy(applyPercentageAllocations, ui));

I opted to include the "%" sign in the array instead of editing the actual source code.  The result was the same but I think this is more maintainable and doesn't affect any future upgrades.

Yes, accessing private members in javascript is a risk.  But it pays off today so we'll take it!

Then in the function I get a reference to the context and check the keycode.  If it is a % or keycode 37, I set the value of the editor and prevent the rest of the actions!  Works perfectly!

function applyPercentageAllocations(e) {
        var self = this;

        if (e.which !== 37) { // percent (%) keycode
            return;
        }

        var editor = $(self.editor).data("igNumericEditor");
        var totalPool = 0;

        switch (self.columnKey) {
            case "PriorYearDeferralAmount":
                totalPool = @Model.Location.PriorYearDeferralAmount;
                break;
            case "FirstPassAmount":
                totalPool = @Model.Location.FirstPassAmount;
                break;
            case "SecondPassAmount":
                totalPool = @Model.Location.SecondPassAmount;
                break;
            case "LcfWaiverAmount":
                totalPool = @Model.Location.LcfWaiverAmount;
                break;
        }

        var currentValue = editor.value();

        if (currentValue >= 100) {
            currentValue = 100;
        }

        if (totalPool !== 0) {
            currentValue = Math.floor(totalPool * (currentValue / 100));
        }

        editor.value(currentValue);
        
        e.preventDefault();
        e.stopPropagation();
    }

Do be careful with the event handler cause you'll cause a lot of subscriptions.  I pair the cellending event with an OFF to prevent multiple calls to the same editor.

Thank you for the provided feedback, Karthik!
If you face any other issues - do not hesitate to contact us again!

Best regards,
Alexander