Posts Tagged ‘aurelia-kendoui-bridge’

Update NumericTextBox precision on the fly

As currency selection changed you naturally want to change the precision and format of a NumericTextBox which contains an amount in the given currency (damn JPY for not using the same precision as everyone else).

At a first glance one might think this can be accomplished using computed properties and something like:

    @bindable precision:number = 2;
 
    @computedFrom('precision')
    get step():number {
        return Math.pow(10, - this.precision);
    }
 
    @computedFrom('precision')
    get format():string {
        return "n" + this.precision;
    }
<input type="number" ak-numerictextbox="k-value.two-way:value; k-spinners.one-way:spinners; k-format.one-way:format; k-decimals.one-way:precision; k-step.one-way:step"/>

However this is not possible and in this specific case there are no kendo functions to achieve this.

The only option, short of recreating the control each time the currency changes is to use the setOptions method as described here:

    precisionChanged(newValue, oldValue){
        let step = Math.pow(10, - this.precision);
        this.numericTextBox.setOptions({format: 'n' + newValue, decimals: newValue, step: step});
        this.numericTextBox.value(this.value);
    }

Please note the value(value()) is a very ugly hack. See running gist.