Using Kendo through MVC creation. Create any chart with @(Html.Kendo().Chart()) code. Plug in a color into any property: Font.Color, MajorGridLines.Color, Series.Color (line, area, column), ValueAxis.Color etc. The color should be a hex string in the format of #102030. The pound character in here messes up the ToClientTemplate() method or alternatively the parsing of that finished template back on the Kendo scripts.
A workaround is to instead use rgb(16, 32, 48) since the # character is not there.
For now I added this extension method if it helps anyone who stumbles along to this.
public static string ToRgbColor(this string hexColor) { var color = ColorTranslator.FromHtml(hexColor); if (color.A == 255) { return $"rgb({color.R},{color.G},{color.B})"; } else { return $"rgba({color.A},{color.R},{color.G},{color.B})"; } }
Hello Paul,
When nesting components inside a Kendo UI template you need to beware of hash symbols and must escape those characters or it causes a template compilation error.
This is documented in the following article:
Let me know if you have any questions.
Regards,
Nikolay
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
The workaround to the Tooltip Template property rendering incorrectly is to escape the pound sign.
.Template("\\#= category \\#: \\#= kendo.format('{0:N1}',value) \\#")
Additionally, the line commented out below also causes this to fail. I have no found a workaround for this. Looks like the single quote char is to blame. Replacing with escaped double quotes does nothing. As does the backquote character.
.Tooltip(tooltip => tooltip
.Visible(true)
//.Template("#= category #: #= kendo.format('{0:N1}',value) #")
)