RadPieChart sometimes disappeared from view

[Hady]

I am using RadPieChart inside RadSlideView. there are five views that already bind to RadSlideView.

When i swipe right to the last view and then swipe left to first view. Some Charts disappeared and while other controls appear well.

this is Xaml Code

01.<telerikPrimitives:RadSlideView ItemsSource="{Binding MyItems}" ShowButtons="False" SelectedIndicatorColor="White" IndicatorColor="LightBlue">
02.    <telerikPrimitives:RadSlideView.ItemTemplate>
03.        <DataTemplate>
04.            <Grid Padding="10">
05.                <Grid.RowDefinitions>
06.                    <RowDefinition Height="Auto" />
07.                    <RowDefinition Height="300" />
08.                </Grid.RowDefinitions>
09.                <StackLayout Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
10.                    <Label Text="{Binding Content}"
11.                           TextColor="White"
12.                           HorizontalTextAlignment="Center"
13.                           VerticalOptions="CenterAndExpand" />
14.                </StackLayout>
15.
16.                <Label  Grid.Row="1" Text="{Binding ChartValue}"
17.                        TextColor="White"
18.                        FontAttributes="Bold"
19.                        BackgroundColor="Transparent"
20.                        FontSize="32"
21.                        HorizontalTextAlignment="Center"
22.                        HorizontalOptions="CenterAndExpand"
23.                        VerticalOptions="CenterAndExpand" />
24.
25.                <telerikChart:RadPieChart Grid.Row="1" BackgroundColor="Transparent" Palette="{Binding ChartPalette}">
26.                    <telerikChart:RadPieChart.Series>
27.                        <telerikChart:DonutSeries ItemsSource="{Binding Data}" ShowLabels="False"
28.                                                  RadiusFactor="0.9" InnerRadiusFactor="0.7"
29.                                                  ValueBinding="Value"/>
30.                    </telerikChart:RadPieChart.Series>
31.                </telerikChart:RadPieChart>
32.            </Grid>
33.        </DataTemplate>
34.    </telerikPrimitives:RadSlideView.ItemTemplate>
35.</telerikPrimitives:RadSlideView>

this is the ViewModel Code

01.public class MainPageViewModel
02.   {
03.       public MainPageViewModel()
04.       {
05.           MyItems = GetMockData();
06.       }
07.
08.       public ObservableCollection<MyItem> MyItems { get; set; }
09.
10.       private ObservableCollection<MyItem> GetMockData()
11.       {
12.           return new ObservableCollection<MyItem>
13.           {
14.               new MyItem
15.               {
16.                   Content = "Comm Fail",
17.                   ChartValue = "29%",
18.                   Data = new ObservableCollection<PieCategoricalData>  {
19.                       new PieCategoricalData { Category = "A", Value = 71 },
20.                       new PieCategoricalData { Category = "B", Value = 29 }
21.                   },
22.                   ChartPalette = GetPalettes("#FFC706")
23.               },
24.               new MyItem
25.               {
26.                   Content = "Flash",
27.                   ChartValue = "8%",
28.                   Data = new ObservableCollection<PieCategoricalData>  {
29.                       new PieCategoricalData { Category = "A", Value = 92 },
30.                       new PieCategoricalData { Category = "B", Value = 8 }
31.                   },
32.                   ChartPalette = GetPalettes("#E94135")
33.               },
34.               new MyItem
35.               {
36.                   Content = "Conflict",
37.                   ChartValue = "1%",
38.                   Data = new ObservableCollection<PieCategoricalData>  {
39.                       new PieCategoricalData { Category = "A", Value = 99 },
40.                       new PieCategoricalData { Category = "B", Value = 1 }
41.                   },
42.                   ChartPalette = GetPalettes("#384CA9")
43.               },
44.               new MyItem
45.               {
46.                   Content = "Disabled",
47.                   ChartValue = "2%",
48.                   Data = new ObservableCollection<PieCategoricalData>  {
49.                       new PieCategoricalData { Category = "A", Value = 98 },
50.                       new PieCategoricalData { Category = "B", Value = 2 }
51.                   },
52.                   ChartPalette = GetPalettes("#BFBFBF")
53.               },
54.               new MyItem
55.               {
56.                   Content = "Police Flash",
57.                   ChartValue = "0%",
58.                   Data = new ObservableCollection<PieCategoricalData>  {
59.                       new PieCategoricalData { Category = "A", Value = 100 },
60.                       new PieCategoricalData { Category = "B", Value = 0 }
61.                   },
62.                   ChartPalette = GetPalettes("#624698")
63.               }
64.           };
65.       }
66.
67.       private ChartPalette GetPalettes(string colorHexValue)
68.       {
69.           ChartPalette palette = new ChartPalette();
70.
71.           palette.Entries.Add(new PaletteEntry()
72.           { FillColor = Color.Transparent, StrokeColor = Color.White });
73.           palette.Entries.Add(new PaletteEntry()
74.           { FillColor = Color.FromHex(colorHexValue), StrokeColor = Color.White });
75.
76.           return palette;
77.       }
78.   }
79.   public class MyItem
80.   {
81.       public string Content { get; set; }
82.       public string ChartValue { get; set; }
83.
84.       public ChartPalette ChartPalette { get; set; }
85.
86.       public ObservableCollection<PieCategoricalData> Data { get; set; }
87.   }
88.
89.   public class PieCategoricalData
90.   {
91.       public object Category { get; set; }
92.
93.       public double Value { get; set; }
94.   }

 

There is a label that has the same Grid cell of the Chart. i am using this label to display a specific legend series. 

[Hady]

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

[Didi]

Hello Hady,

Thank you for the provided code.

I have tested the described scenario and I have reproduced the issue. It seems that the chart is not measured correctly when it is positioned inside a Grid with RowHeight = "Auto".
Currently the workaround I could suggest is to set the Grid RowHeight = "*". I have attached the sample for reference.

Please take a look at the provided project and let me know if you have any additional questions.

Regards,
Didi
Progress Telerik

[Hady]

Hello Didi,

Thank you so much for your reply.

I tested your project and it works fine, and i am sorry for saying that in my case it doesn't work.

My grid has 2 rows, first one contains label and  RowHeight="Auto". second one contains Chart and another label and RowHeight="300". the reason of setting RowHeight="300" that we are going to add another row contains list view. When the RowHeight="*" the chart works fine but when i modified it to RowHeight="300" the issue is reproduced.  Is there any other workaround that? 

[Didi]

Hi Hady,

I am sorry to hear that the provided workaround is not suitable for you. Another approach that could be used is to positioned the PieChart inside a Grid and on it to set Grid.Row="1".  In this case the RowHeight will be kept 300 - please refer to the attached project

Indeed I have logged this issue with the SlideView control in our Feedback portal and you could follow the item on the provided link: SlideView: PieCharts disappear when sliding. I have also updated your Telerik points for this report.

Let me know If you have any additional questions.

Regards,
Didi
Progress Telerik

[Hady]

Thanks Didi, it works now.