RadialGauge in TileLayout Fails to Render If I Use Ranges

[Matt]

I am attempting to add a RadialGuage to a TileLayout - without many options other than the value, this works just fine, however when adding ranges for color bands, the rendering fails and I get a javascript error in the browser console.

I'm not sure if this has something to do with having to use ToClientTemplate() or not, however I'm stumped and have been unable to workaround this so far:

<script id="radial" type="text/x-kendo-template">
<div id="gauge-container">
    @(Html.Kendo().RadialGauge()
    .Name("gauge")
    .Pointer(pointer => pointer.Value((int)Model.DialValue))
    .Scale(scale => scale
        .MinorUnit(5)
        .StartAngle(-30)
        .EndAngle(210)
        .Max(125)
        .Labels(labels => labels
                .Position(GaugeRadialScaleLabelsPosition.Inside)
                .Font("20px Arial")
            )
           .Ranges(ranges =>
            {
                ranges.Add().From(0).To(75).Color("#f44004");
                ranges.Add().From(75).To(100).Color("#a2dd21");
                ranges.Add().From(100).To(125).Color("#2cb235");
            })
    ).ToClientTemplate()
    )
    <span class="widgetlabel">Overall Efficiency<br />@Model.DialValue%</span>
</div>
</script>

[Matt]

I think this is a bug...

[Matt]

So for anyone else running into this, you have to double escape the color hex value pound sign:

.Ranges(ranges =>
            {
                ranges.Add().From(0).To(75).Color("\\#f44004");
                ranges.Add().From(75).To(100).Color("\\#a2dd21");
                ranges.Add().From(100).To(125).Color("\\#2cb235");
            })

 

[Tsvetomir]

Hi Matt,

It is correct that the Kendo UI TileLayout would fail to render when the colors of the ranges are set with the "#" symbols. This is due to the fact that the widget internally uses these symbols for templating. When they are set as standalone values, then they would break the templates. 

Escaping them would resolve the issue as you have already found out.

 

Kind regards,
Tsvetomir
Progress Telerik