This is a migrated thread and some comments may be shown as answers.

RadialGauge in TileLayout Fails to Render If I Use Ranges

3 Answers 12 Views
TileLayout
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 11 Mar 2021, 08:27 PM

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>

3 Answers, 1 is accepted

Sort by
0
Matt
Top achievements
Rank 1
answered on 15 Mar 2021, 03:08 PM
I think this is a bug...
0
Matt
Top achievements
Rank 1
answered on 15 Mar 2021, 04:54 PM

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");
            })

 

0
Tsvetomir
Telerik team
answered on 16 Mar 2021, 03:37 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
TileLayout
Asked by
Matt
Top achievements
Rank 1
Answers by
Matt
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or