Update value without refreshing entire control/page

[jfkrueger]

I have finally gotten my gauges working correctly. The gaugues get their values based on a drop-down selection in the hosting .aspx page. When the drop-down changes, I would like the silverlight gauges to update their values. I am able to do this, however the entire page has to refresh which causes the control to dissappear, then appear again and reload. Is there a less "clunky" way of updating the values that the control uses  so that it is only the needles in the gauges updating rather than the entire control dissappearing and reloading?

Thanks!

[Andrey]

Hi jfkrueger,

I think you can use javascript functionality to set the value to the gauge control.
I have attached a sample solution which uses the GaugeValue scriptable member of the silverlight gauge control from javascript code to set a value to the needle indicator.

All the best,
Andrey Murzov
the Telerik team

[jfkrueger]

What if I had the selector as part of the silverlight control rather than in the .aspx page (like how the sales dashboard is)?

[Andrey]

Hi jfkrueger,

You can use any appropriate element which allows to select the value for a gauge. The following example uses the ComboBox and its SelectionChanged event to change the value of the needle:
 

<UserControl x:Class="SelectGaugeValue.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    Width="300" Height="330">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="3*" />
        </Grid.RowDefinitions>
        <ComboBox x:Name="comboBox" Height="30" Width="200" SelectionChanged="ComboBox_SelectionChanged">
            <sys:Double>0</sys:Double>
            <sys:Double>10</sys:Double>
            <sys:Double>30</sys:Double>
            <sys:Double>50</sys:Double>
            <sys:Double>80</sys:Double>
        </ComboBox>
        <telerik:RadGauge Grid.Row="1">
            <telerik:RadialGauge>
                <telerik:RadialScale>
                    <telerik:IndicatorList>
                        <telerik:Needle x:Name="needle" IsAnimated="True"/>
                    </telerik:IndicatorList>
                </telerik:RadialScale>
            </telerik:RadialGauge>
        </telerik:RadGauge>
    </Grid>
</UserControl>

using System.Windows.Controls;

namespace SelectGaugeValue
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            this.comboBox.SelectedIndex = 0;
            this.needle.Value = 0;
        }

        private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (e.AddedItems != null && e.AddedItems.Count > 0)
            {
                this.needle.Value = (double)e.AddedItems[0];
            }
        }
    }
}

Kind regards,
Andrey Murzov
the Telerik team