Label Template for Linear Gauge

2 posts, 0 answers
  1. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 09 Mar 2015 Link to this post


    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?

  2. Danail Vasilev
    Danail Vasilev avatar
    1502 posts

    Posted 11 Mar 2015 Link to this post

    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.

Back to Top