RadLinearSparkline Not Binding

[Sunil]

Hi,
I have grid, inside grid RadLinearSparkline control
I am trying to bind control but it is not binding.
I attached source code.

 

<telerik:GridViewDataColumn Header="Jan'10-Dec'10">

                            <telerik:GridViewDataColumn.CellTemplate>

                                <DataTemplate>

                                    <telerik:RadLinearSparkline ShowAxis="False" Visibility="Visible" ItemsSource="{Binding actualMeasure}" XValuePath="Cost" YValuePath="UnitCost" ShowFirstPointIndicator="True" ShowLastPointIndicator="True"

                                      ShowHighPointIndicators="True" ShowLowPointIndicators="True" HorizontalAlignment="Left" Height="20" Margin="0" VerticalAlignment="Top" Width="100"/>

                                </DataTemplate>

                            </telerik:GridViewDataColumn.CellTemplate>

                        </telerik:GridViewDataColumn>

public SBPage()
        {
            InitializeComponent();
            SBDataGrid.ItemsSource = GetScorecard();
            //SparklineChart.ItemsSource = GetSparkLineData();
            this.GetSparkLineData();
        }
public ObservableCollection<TempData> GetScorecard()
        {
            ObservableCollection<TempData> scorecard = new ObservableCollection<TempData>
           {


              new TempData { Type = "Global ", Indicator="", Values = "", IndustryBenchmark="", Cost=2, UnitCost=14 },
              new TempData { Type = "", Indicator="Total ", Values = "$65.4 ", IndustryBenchmark="/Images/Down_Arrow.png", Cost=2, UnitCost=14 },
              new TempData { Type = "", Indicator="Total ", Values = "$75.2 ", IndustryBenchmark="/Images/Down_Arrow.png", Cost=2, UnitCost=14 },
              new TempData { Type = "", Indicator="Total ", Values = "$140.6", IndustryBenchmark="/Images/Yellow_arrow.png", Cost=2, UnitCost=14 },

              new TempData { Type = "Global ",Indicator="", Values ="", IndustryBenchmark=""},
              new TempData { Type = "", Indicator="Total ", Values = "1.5 TB", IndustryBenchmark="/Images/Down_Arrow.png", Cost=2, UnitCost=14 },
              new TempData { Type = "", Indicator="Total ", Values = "0.9 TB", IndustryBenchmark="/Images/Down_Arrow.png", Cost=2, UnitCost=14 },
              new TempData { Type = "", Indicator="Total Allocated ", Values = "0.6 TB", IndustryBenchmark="/Images/Down_Arrow.png", },
              new TempData { Type = "", Indicator="Asset ",  Values = "75%", IndustryBenchmark="/Images/Down_Arrow.png", },
              new TempData { Type = "", Indicator="Assets ",  Values = "5", IndustryBenchmark="/Images/Up_Arrow.png", },

              new TempData { Type = "Monthly",Indicator="",Values ="", IndustryBenchmark=""},
              new TempData { Type = "", Indicator="",  Values = "$50.00", IndustryBenchmark="/Images/Down_Arrow.png", },
              new TempData { Type = "", Indicator="",  Values = "$20.00", IndustryBenchmark="/Images/Yellow_arrow.png", },
              new TempData { Type = "", Indicator="", Values = "$15.00", IndustryBenchmark="/Images/Yellow_arrow.png", },
              new TempData { Type = "", Indicator="",Values = "$5.00", IndustryBenchmark="/Images/Down_Arrow.png", },
              new TempData { Type = "", Indicator="", Values = "$13.00", IndustryBenchmark="/Images/Down_Arrow.png", },
              new TempData { Type = "", Indicator="B", Values = "$3.00", IndustryBenchmark="/Images/Up_Arrow.png", },
           };

            return scorecard;
        }

        public ObservableCollection<TempData> GetSparkLineData()
        {
            ObservableCollection<TempData> actualMeasure = new ObservableCollection<TempData>
           {
              new TempData {  Cost = 1, UnitCost = 34, },
              new TempData {  Cost = 2, UnitCost = 32, },
              new TempData {  Cost = 3, UnitCost = 35, },
              new TempData {  Cost = 4, UnitCost = 40, },
              new TempData {  Cost = 5, UnitCost = 28.5, },
              new TempData {  Cost = 6, UnitCost = 28, },
              new TempData {  Cost = 7, UnitCost = 35.5, },
              new TempData {  Cost = 8, UnitCost = 40.2, },
              new TempData {  Cost = 9, UnitCost = 27, },
              new TempData {  Cost = 10, UnitCost = 32, },
              new TempData {  Cost = 11, UnitCost = 40, },
              new TempData {  Cost = 12, UnitCost = 26, },
           };

            return actualMeasure;
        }

        public class TempData
        {
            private string type;
            private string month;
            private string indicator;
            private string industryBenchmark;
            private double unitCost;
            private double cost;
            private string values;

            private ObservableCollection<TempData> actualMeasure;
            public ObservableCollection<TempData> ActualMeasure
            {
                get
                {
                    return actualMeasure;
                }
                set
                {
                    actualMeasure = value;
                }
            }

            public string Values
            {
                get
                {
                    return values;
                }
                set
                {
                    values = value;
                }

            }

            public string Type
            {
                get
                {
                    return type;
                }
                set
                {
                    type = value;
                }

            }
            public string Month
            {
                get
                {
                    return month;
                }
                set
                {
                    month = value;
                }

            }
            public string Indicator
            {
                get
                {
                    return indicator;
                }
                set
                {
                    indicator = value;
                }

            }
            public string IndustryBenchmark
            {
                get
                {
                    return industryBenchmark;
                }
                set
                {
                    industryBenchmark = value;
                }

            }
            public double UnitCost
            {
                get
                {
                    return unitCost;
                }
                set
                {
                    unitCost = value;
                }
            }

            public double Cost
            {
                get
                {
                    return cost;
                }
                set
                {
                    cost = value;
                }
            }

        }

[Yavor]

Hi sunil,

I see from your code that you are binding your sparklines to actualMeasure member of your data and you are not initializing it. That's why your sparklines appear empty. Also you have to bind your sparklines to the wrapper property instead of the underlying field. Changing the binding expression to this:

<telerik:RadLinearSparkline ItemsSource="{Binding ActualMeasure}

and initializing your ActualMeasures like this

ObservableCollection<TempData> scorecard = new ObservableCollection<TempData>
           {
              new TempData { Type = "Global ", Indicator="", Values = "", IndustryBenchmark="", Cost=2, UnitCost=14, ActualMeasure = GetSparkLineData() },

should bind your sparklines correctly.

In the attached file you can find a runnable version of your code that has the sparklines binding correctly.

Hope this helps!

Greetings,
Yavor Ivanov
the Telerik team

[Sunil]

Hi Yavor,
It Works Fine...
Many Thanks.....

[Rama]

Hi,

I'm having issues in databinding:

   <DataTemplate x:Name="sparklineTemplate">
            <telerik:RadAreaSparkline ShowAxis="False" Width="120" Height="40"  Visibility="Visible"   ItemsSource="{Binding DataPoints}" XValuePath="Key" YValuePath="Value" />
        </DataTemplate>


But the trouble is, I don't have direct binding path but something like the following:

var bindingPath = string.Format("DataPoints[{0}]", date);
                var bin = new Binding(bindingPath)

How do I represent same in DataTemplate?

[Rama]

Hi,

Please note that my DataPoints is a dictionary : Dictionary<string,double>

so how do you bind to dictionary?

ItemsSource="{Binding DataPoints}" XValuePath="Key" YValuePath="Value"


Key & Value is not working!

[Giuseppe]

Hi Rama,

Silverlight does not support such type of dynamic resolution of XValuePath / YValuePath properties -- their values must be static. The framework does not support the DataTemplateSelector concept either but you can try to implement it on your own -- check the following article to get you started.

As for your dictionary question -- the XValuePath must resolve to numeric (double) or DateTime property, string values (i.e. categorical mode) are not supported. So you will be able to bind to Dictionary<double, double> or Dictionary<DateTime, double> but not to Dictionary<string, double>.

Kind regards,
Giuseppe
the Telerik team