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:

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;

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?

Answer 1

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.