Knockout-kendo radial gauge not drawing correctly when initialized using data-bind

Question

Having issues with the Knockout-Kendo radial gauge in my application. I'm trying to initialize it via the data-bind property, but it does not appear to be resizing itself correctly.

<div id="speedGauge" data-bind="kendoRadialGauge: $parent.speedGaugeOptions"></div>
...
self.speedGaugeOptions = {
    renderAs: 'svg',
    value: 0,
    gaugeArea: {
        background: 'transparent'
    },
    pointer: {
        color: 'lightgray',
        animation: {
            speed: 100
        }
    },
    scale: {
        minorUnit: 75,
        majorUnit: 150,
        startAngle: -40,
        endAngle: 220,
        max: 300,
        min: -300,
        labels: {
            position: 'inside',
            font: '10px Arial,Helvetica,sans-serif'
        },
        ranges: [
                {
                    from: -300,
                    to: -200,
                    color: "darkgray"
                },
                {
                    from: 300,
                    to: 200,
                    color: "darkgray"
                }
        ],
        rangeSize: 5,
        rangeDistance: -5,
        rangePlaceholderColor: '#f2f2f2'
}

Here comes the fun part; When the page has activated (using durandal), the gauges are drawn like this: enter image description here

In order for the gauge to scale correctly and fit inside the gray circle, I have to redraw it like this (either from the browser console, or in the .js file):

$("#speedGauge").data("kendoRadialGauge").redraw()

When doing so, my gauge looks the way it's suppose to; enter image description here

Now, I've tried creating it using the regular Kendo implementation - and that works just fine resulting in the gauge to be drawn correctly like in the image above;

<div id="speedGauge"></div>
...
self.activate = function () { 
   createGauge();
}
...
function createGauge() {
    $("#speedGauge").kendoRadialGauge({
        renderAs: 'svg',
        value: 0,
        gaugeArea: {
            background: 'transparent'
        },
        pointer: {
            color: 'lightgray',
            animation: {
                speed: 100
            }
        },
        scale: {
            minorUnit: 75,
            majorUnit: 150,
            startAngle: -40,
            endAngle: 220,
            max: 300,
            min: -300,
            labels: {
                position: 'inside',
                font: '10px Arial,Helvetica,sans-serif'
            },
            ranges: [
                    {
                        from: -300,
                        to: -200,
                        color: "darkgray"
                    },
                    {
                        from: 300,
                        to: 200,
                        color: "darkgray"
                    }
            ],
            rangeSize: 5,
            rangeDistance: -5,
            rangePlaceholderColor: '#f2f2f2'
        }
    });
}

Does anyone have an idea of what might be wrong here?

Just out of curiosity, why do you object to the redraw? It's not uncommon to have to issue an update or redraw with graphical renderings. What happens when you make `speedGaugeOptions` an observable? — , Oct 20 '14 at 19:50
@EricTaylor That was just to force a redraw and see if it solved the problem - which it did :) The reason being that I use signalR to update the ranges and values. By updating the scale.options.ranges[], the gauge redraws itself, and that's how I initially found that redrawing makes it fit like I want. Currently I'm just doing the redraw from the browser console. I'll try the observable thing tomorrow :) — Nicklas Pouey-Winger, Oct 20 '14 at 20:01
@EricTaylor Nothing appears to be different when making it an observable. — Nicklas Pouey-Winger, Oct 21 '14 at 07:19
O.K. I would post an issue here: https://github.com/kendo-labs/knockout-kendo/. Ryan is pretty responsive and there's something here that he may need to know about. One other thing: Make sure you take note of the "note" in the Durandal docs (http://durandaljs.com/documentation/KendoUI.html) concerning Knockout-Kendo. I discovered the exception over a year ago and reported it to Rob, which resulted in that caveat. But I have since moved on and written my own controls for Durandal (using Durandal itself). — , Oct 21 '14 at 16:11

score 0 · Accepted Answer · answered Oct 22 '14 at 11:08

A colleague suggested to do a forced redraw of the gauges on durandals attached event, which solved the problem for now. The actual resizing of the gauge is not visible with this solution.

self.attached = function(element) {
    $(element).find("[data-role='radialgauge']").each(function () { $(this).data("kendoRadialGauge").redraw(); });    
};

I've reported the issue here.

Knockout-kendo radial gauge not drawing correctly when initialized using data-bind

1 Answers1