Last Updated: 05 Apr 2021 11:31 by ADMIN
Created on: 29 Mar 2021 16:40
Category: Chart
Type: Bug Report
Invalid template created from Chart - ToClientTemplate

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})";
Posted on: 05 Apr 2021 11:31

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.

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

Posted on: 01 Apr 2021 21:22

The workaround to the Tooltip Template property rendering incorrectly is to escape the pound sign.

.Template("\\#= category \\#: \\#= kendo.format('{0:N1}',value) \\#")
Posted on: 29 Mar 2021 16:49

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
   //.Template("#= category #: #= kendo.format('{0:N1}',value) #")