[Solved] Tooltip databinding

[Nazia]

Hi,



I am binding data to tooltip.



In the Telerik sample code, 

<DataTemplate x:Key="TooltipTemplate">

<Border BorderThickness="2" Margin="8,4,8,2" Background="White" BorderBrush="Black">

<TextBlock Text="{Binding DataPoint.Value}" Margin="4,4,4,3" FontSize="14.667" Foreground="Black"/>

</Border>

</DataTemplate>







I need to bind some other value other than the chart's value.



How to bind the data in that case?

[Tsvyatko]

Hi Nazia,

 I assume you trying to display property from the dataitems that chart is bound to. This can be achieved using value converter similar to this:

public class CustomConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        DataPointInfo context = value as DataPointInfo;
        if (context == null)
        {
            return value;
        }


        var item = context.DataPoint.DataItem as [YourDataType];

        return [extracted data from your item and format is as needed];
    }
}

And use it in XAML like this:

<DataTemplate>
     <Border BorderThickness="2" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
         <TextBlock>
             <TextBlock.Text>
                 <Binding Converter="{StaticResource CustomConverter}"/>
             </TextBlock.Text>
         </TextBlock>
     </Border>
 </DataTemplate>
....
<local:CustomConverter x:Key="CustomConverter"/>

Kind regards,
Tsvyatko
the Telerik team

[Rohan]

Can u pls explain the same with the sample code, as I am new to Windows8 and telerik. In my case I have got 3 different series on the chart. How can I attend to show tooltip for the datapoints on the same.

[Ivaylo Gergov]

Hello Rohan,

In order to use the ChartToolTip behavior all you need is to define it in your Chart:

<telerik:RadCartesianChart.Behaviors>
    <telerik:ChartTooltipBehavior/>
</telerik:RadCartesianChart.Behaviors>

If you want to customize its content you can use the ChartToolTipBehavior.ContentTemplate property and set its DataTemplate. Here's an example:

<telerik:ChartTooltipBehavior.ContentTemplate>
     <DataTemplate>
         <StackPanel>
             <Ellipse Stroke="DarkGreen" Width="10" Height="10"/>
             <TextBlock Text="{Binding DataPoint.Category}" Foreground="DarkGreen"/>
         </StackPanel>
     </DataTemplate>
 </telerik:ChartTooltipBehavior.ContentTemplate>

I hope this helps. Let me know if I can assist you any further.

 

Greetings,
Ivaylo Gergov
the Telerik team