RadPieChart is now working with RadSlideView

[Hady]

I am developing a page contains RadPieChart inside a RadSlideView. When i deploy the application on either iOS 12.1 or Android 8.1 RadPieChart doesn't display and other control works fine.

I am using Xamarin Forms 3.1 and Telerik.UI.For.Xamarin 2018.3.1018.1

i attached the Xaml code and ViewModel Code

[Lance | Manager Technical Support]

Hello Hady,

This is happening because the PieChart has a data bound ItemsSource. It's important to understand that when you use the RadSlideView with ContentViews as the ItemsSource, the BindingContext is that ContentVie. The ContentView's content cannot inherit BindingContext from the page.

To be specific in your case, the BindingContext of the RadPieChart is not MainPageViewModel. Thus, the Data property is not visible to the chart and no items get rendered.


Data Binding Support

There is currently no way to pass the BindingContext down into the ContentView. However there is an approach you can use to facilitate this. Switch to using the ItemTemplate and provide a collection of objects (not Views) to the RadSlideView ItemsSource, see this RadSlideView documentation for an example.

To add to that example, if you want to provide an ItemsSource to the pie chart, then add a Data property to the Item class so that it's available to the DataTemplate:

public class MyItem
{
    public string Content { get; set; }

    public ObservableCollection<CategoricalData> Data { get; set; }
}

Then you can use that BindingContext in the DataTemplate to set the ItemsSource of the series:

<primitives:RadSlideView x:Name="slideView" ItemsSource="{Binding MyItems}">
    <primitives:RadSlideView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <Label Text="{Binding Content}" TextColor="#007ACC" HorizontalTextAlignment="Center"/>

                <chart:RadPieChart x:Name="pieChart"  Grid.Row="1">
                    <chart:RadPieChart.Series>
                        <chart:DonutSeries ItemsSource="{Binding Data}"  ShowLabels="False" ValueBinding="Value"/>
                    </chart:RadPieChart.Series>
                </chart:RadPieChart>
            </Grid>
        </DataTemplate>
    </primitives:RadSlideView.ItemTemplate>
</primitives:RadSlideView>

I've attached a full example of this approach, here are the slides at runtime:







Note: 
If you want different items on different slides, then you can use an ItemTemplateSelector to change the DataTemplate, see the ItemTemplateSelector documentation for a tutorial example.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Hady]

Thank you so much for your help. It works fine with me now. But i have another concern, i have 5 Donut charts each one has different chart palette colors. can i do it using template selector?.

I tried to bind the color to FillColor property and i found that is not a Bindable property 

[Lance | Manager Technical Support]

Hi Hady,

Correct, FillColor is not a bindable property. Instead, you can set a custom palette for each chart. See the Custom Palette documentation for more information.

It's up to you on how you want to set the palette; dynamic (using a property on the slide's data model) or declarative using TemplateSelector and different DataTemplates.

Here's an example of setting it declaratively:

<telerikChart:YourChartTypeGoesHere.Palette>
        <telerikChart:ChartPalette>
            <telerikChart:ChartPalette.Entries>
                <telerikChart:PaletteEntry FillColor="Red" StrokeColor="Blue" />
                <telerikChart:PaletteEntry FillColor="Green" StrokeColor="Black" />
                <telerikChart:PaletteEntry FillColor="Blue" StrokeColor="Yellow" />
            </telerikChart:ChartPalette.Entries>
        </telerikChart:ChartPalette>
</telerikChart:YourChartTypeGoesHere.Palette>

If you have any trouble with this, please open a support ticket here so that you can get assistance directly from the chart development team.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik