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

Label Template for Linear Gauge

1 Answer 189 Views
This is a migrated thread and some comments may be shown as answers.
Stuart Hemming
Top achievements
Rank 2
Stuart Hemming asked on 09 Mar 2015, 10:33 AM

I know I'm not the brightest button in the box, but I feel even more stupid after spending the better part of a day trying to work this out.

I have a gauge with 5 values and I want to put a text label next to the major tick of each one on the chart but I can't get anything to work.

My chart definition looks like this...

    .Pointer(pointer => pointer
    .Scale(scale => scale
        .Ranges(ranges =>

I'm trying to put in a template that will allow the value of the label to be changed.

A post on StackOverflow pointed me in the right direction (I think) but it assumed I was working with kendo directly. It's my attempt to get the template working with the MVC wrappers that has me stumped.

A line like this works...

    .Template("#= 't' #")

insomuch that it prints 't' as the label for each item, so it's of no practical help.

Any kind of JS just returns an error. for example, ...

    .Template("# 'function(r){ return 't'} #")

reports the following error in Chrome...

Uncaught Error: Invalid template:'# 'function(r){ return 't'} #' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput=''; 'function(r){ return 't'} ;$kendoOutput+='';}return $kendoOutput;'

I wondered if the JS was simply being executed, so I tried this ...

    .Template("#= 'function(r){ return 't'} #")

and that get's me a slightly different error....

Uncaught Error: Invalid template:'#= 'function(r){ return 't'} #' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput=''+( 'function(r){ return 't'} )+'';}return $kendoOutput;'

So, I'm falling at the first fence,. The most frustrating thing is that I can't find any meaningful documentation.

Can some one PLEASE help me?

1 Answer, 1 is accepted

Sort by
Danail Vasilev
Telerik team
answered on 11 Mar 2015, 07:15 AM
Hello Stuart,

It is not necessary to use anonymous functions in templates. You can just either execute your JavaScript logic:
template: "#if(value > 60){# #=value# #} else{# low #} #"
OR use named functions:
template: "#=setValue(value)#"
              function setValue(value){
                if(value > 60){
                        return value;
                    return 'low'

See an example the dojo sample.

Danail Vasilev

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Asked by
Stuart Hemming
Top achievements
Rank 2
Answers by
Danail Vasilev
Telerik team
Share this question