Knockout-Kendo RadialGauge pointer transition not working

Question

Can anyone explain why this

js:

var ViewModel = function() {
   this.myValue = ko.observable(25);
};

ko.applyBindings(new ViewModel());

html:

<div data-bind="kendoRadialGauge: myValue"> </div>

will allow the pointer to transition nicely to the new value, when the databound value changes.

However when passing additional options, like this

js:

var ViewModel = function() {
this.myValue = ko.observable(25);

//various gauge settings omitted for brevity

this.pointerOptions = ko.computed(function() {
       return { color: this.pointerColor(), value: this.myValue() };
   }, this);
};

ko.applyBindings(new ViewModel())

html:

<div data-bind="kendoRadialGauge: { value: myValue, gaugeArea: gaugeOptions, pointer: pointerOptions }"> </div>

...the pointer just jumps immediately to the new value.

Knockout 2.3.0, JQuery 2.0.3, Kendo UI Dataviz 2013.2.716

Answer 1

When you are specifying any of the KO "tracked" options (gaugeArea, pointer, scale) the gauge gets re-drawn by KO with using the Kendo's redraw method.

In itself it shouldn't cause the lost of the transition but KO also slightly changes the gauge's value which causes the transition lost.

Source on github:

this.value(0.001 + this.value());

Removing this line from the source code fixes your problem, so I would say this is bug in Knockout-Kendo.