Label Template for Linear Gauge

[Stuart Hemming]

OK.

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...

@(Html.Kendo().LinearGauge()
    .Name("progressGauge")
    .Pointer(pointer => pointer
        .Value(2.5)
        .Shape(GaugeLinearPointerShape.Arrow)
    )

    .Scale(scale => scale
        .MajorUnit(1)
        .MinorUnit(0.5)
        .Max(4)
        .Vertical(false)
        .Ranges(ranges =>
        {
            ranges.Add().From(0).To(1).Color("#dbe5f1");
            ranges.Add().From(1).To(2).Color("#cadbf0");
            ranges.Add().From(2).To(3).Color("#b2c9e5");
            ranges.Add().From(3).To(4).Color("#94b6df");
        })
    )
)

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...

.Labels(x=>x
    .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, ...

.Labels(x=>x
    .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 ...

.Labels(x=>x
    .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?

[Danail Vasilev]

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;
                }
                else{
                    return 'low'
                }
              }

See an example the http://dojo.telerik.com/uhOLE/2 dojo sample.

Regards,
Danail Vasilev
Telerik