Dynamically change range sizes on radial gauge

[Ian]

Hi

I currently have the following but I would like to be able to specify the ranges dynamically using sliders. Can anyone tell me how to implement this?

Note - there will always be four ranges, its just where these start and stop is where I want to regulate.

@(Html.Kendo().RadialGauge()

.Name("testRadialGauge")

.Pointer(pointer => pointer

.Value(0)

.Color("Blue")

)

.Scale(scale => scale

.MinorUnit(200)

.StartAngle(-30)

.EndAngle(210)

.Max(5000)

.Labels(GaugeRadialScaleLabels => GaugeRadialScaleLabels

.Visible(true)
                         )

.Ranges(ranges =>

{

ranges.Add().From(0).To(800).Color("#c20000");

ranges.Add().From(800).To(1600).Color("#ff7a00");

ranges.Add().From(1600).To(2000).Color("#ffc700");

ranges.Add().From(2000).To(5000).Color("green");

})

)
)

            

      

[Iliana Dyankova]

Hello Ian,

Basically Kendo UI Radial Gauge does not support dynamic changes of its configuration options, however you could workaround it and set new ranges via the options (keep in mind you should redraw the Gauge). For example: 

//get reference to the Gauge widget
var gauge = $("#gauge").data("kendoRadialGauge");
//get the Gauge ranges
var ranges = gauge.options.scale.ranges;
//set 1000 as "from" value to the second range
ranges[1].from = 1000;
//redraw the Gauge
gauge.redraw();

Regards,
Iliana Nikolova
Telerik