CODEWITHSUNDEEP
javascriptjqueryinfragisticsignite-ui
Michaelh
Michaelh

Reputation: 156

Ignite UI IgCurrencyEditor

I am trying to programmatically update a currency field to run the value changed event which holds a numeric calculation. I want the value to set to zero using something like.

$('.tester').igCurrencyEditor("setFocus");

$('.tester').igCurrencyEditor('option','value', 0);

Then when I blur out, or not sure what to do here, the valueChanged event should trigger as per the API docs (It can be raised on lost focus or on spin events).

But I can't seem to trigger the value changed event, it only works when I manually click into the input and change the number.

Upvotes: 1

Views: 144

Answers (2)

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

The valueChanging and valueChanged events would trigger when a user interaction changes the displayInput value of the editor, and the corresponding valueInput value is different from the display input one. The editors have adopted the same approach as all other Ignite UI controls where events do not trigger on API calls, because when an API call is performed, the developer can choose whether to invoke their event handler after the API call, or not.

There's two things that you can do to invoke your event handler. First one is to cache the event handler method and invoke it manually:

$('.tester').igCurrencyEditor({
    ...
    valueChanged: valueChanged,
    ...
});

function valueChanged(event, ui) {
    // event handler
};

$('.tester').igCurrencyEditor("setFocus");
$('.tester').igCurrencyEditor('option','value', 0);
valueChanged(null, { /* if you need arguments */ });

The second one is to extend the currency editor and override the method that performs the check whether these events should be triggered, and make it always trigger the events:

$.widget("ui.igCurrencyEditorExtension", $.ui.igCurrencyEditor, {
    _processValueChanging: function (value) {
        this._triggerInternalValueChange(value);
    }
}

The second approach requires you to switch to using the igCurrencyEditorExtension and may cause side effects, as the method performs other checks as well.

Anyways, what Alex Marinov has suggested should work, but it depends on your editor configuration, depending on whether you've set nullValue, allow null values in the editor, etc.

Upvotes: 3

Alex Marinov
Alex Marinov

Reputation: 191

you need a function like this:

function clearValue() {
    $('.tester').igCurrencyEditor('option','value', "");
    $('.tester').igCurrencyEditor('field').blur();
}

The result will be that the displayed value inside the currency editor is "$0.00" and the valueChanged event is fired.

Upvotes: 3

Related Questions