incorrect values using Rating within ListViewTemplateCell

[Rinke]

Hi,

I am having issues with a rating control nested inside a ListViewTemplateCell. The rating value (number of filled items) mismatches with the underlying bound value. The strange thing is that the initial rendered list is ok, but as soon as i start scrolling down the new appearing cells show the described problem. See the attached image. The rating value property is bound to an ObservableCollection<OBJ> via MVVM. I tried int and double, but no difference.

Any ideas? 

 

Here is my XAML test snippet:

01.<?xml version="1.0" encoding="utf-8" ?>

02.<ContentPage

03.x:Class="PortaalApp.Views.IncidentListPage" xmlns="http://xamarin.com/schemas/2014/forms"

04.xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:converters="clr-namespace:PortaalApp.Converters"

05.xmlns:i18n="clr-namespace:PortaalApp.I18n" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"

06.xmlns:prismBehaviors="clr-namespace:Prism.Behaviors;assembly=Prism.Forms" xmlns:rating="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

07.xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls" xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"

08.xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives" xmlns:views="clr-namespace:PortaalApp.Views"

09.x:Name="this" prism:ViewModelLocator.AutowireViewModel="True">

10. 

11.<telerikDataControls:RadListView x:Name="listView" ItemsSource="{Binding ListSource}">

12. 

13.<telerikDataControls:RadListView.ItemTemplate>

14.<DataTemplate>

15.<telerikListView:ListViewTemplateCell>

16.<telerikListView:ListViewTemplateCell.View>

17.<StackLayout Orientation="Horizontal">

18.<rating:RadShapeRating

19.x:Name="inzetRating"

20.ItemShape="{x:Static rating:Geometries.Circle}"

21.Value="{Binding InzetIndex}" />

22.<Label Text="{Binding InzetIndex, StringFormat='{0}'}" />

23.</StackLayout>

24.</telerikListView:ListViewTemplateCell.View>

25.</telerikListView:ListViewTemplateCell>

26.</DataTemplate>

27.</telerikDataControls:RadListView.ItemTemplate>

28.</telerikDataControls:RadListView>

29.</ContentPage>

 

The underlying bound object:

[System.CodeDom.Compiler.GeneratedCode("NJsonSchema", "9.10.6.0 (Newtonsoft.Json v9.0.0.0)")]
    public partial class OBJ_Result
    {
        public int InzetIndex
        {
            get
            {
                if (A) return 3;
                else if (B) return 2;
                else if (C) return 1;
                else return 0;
            }
        }

        [Newtonsoft.Json.JsonProperty("C", Required = Newtonsoft.Json.Required.Always)]
        public bool C { get; set; }

        [Newtonsoft.Json.JsonProperty("B", Required = Newtonsoft.Json.Required.Always)]
        public bool B { get; set; }

        [Newtonsoft.Json.JsonProperty("A", Required = Newtonsoft.Json.Required.Always)]
        public bool A { get; set; }

        public string ToJson()
        {
            return Newtonsoft.Json.JsonConvert.SerializeObject(this);
        }

        public static OBJ FromJson(string data)
        {
            return Newtonsoft.Json.JsonConvert.DeserializeObject<OBJ>(data);
        }
    }

 

[Rinke]

This is my setup:

Telerik.Ui.For.Xamarin v2017.3.1103.4

Xamarin Forms 2.4.0.282

Visual Studio Enterprise 2017 Preview (2) 15.5.0 Preview 3

Windows 10 Enterprise x64 1703

Android 7.1.2

[Stefan Nenchev]

Hello, Rinke,

Please try setting the Binding mode of the Value to TwoWay:

<listView:ListViewTemplateCell.View>
    <StackLayout Orientation="Horizontal">
        <telerikInput:RadShapeRating
            x:Name="inzetRating"
            ItemShape="{x:Static telerikInput:Geometries.Circle}"
            Value="{Binding InzetIndex, Mode=TwoWay}" />
        <Label Text="{Binding InzetIndex}" />
    </StackLayout>
</listView:ListViewTemplateCell.View>

I have attached a sample for your reference which seems to work fine for me. 

Regards,
Stefan Nenchev
Progress Telerik

[Rinke]

Thanks Stefan,

That seems to work, nice. 

Is this solution 'as designed' for controls nested within a listview, or is it a workaround to a known problem? Because it seems a bit strange to require a two way binding even when not changing any of the underlying data after initial load.

Regards,

Rinke

[Stefan Nenchev]

Hi, Rinke,

I am glad to see that changing the mode seems to fix the issue.

Indeed, the behavior of the Rating within the RadListView does not seem correct. We will log the behavior as a bug in our system so we can further investigate it. I will update the thread with the public item once we log the behavior at our end so you can follow it(as we need some more time to find out what exactly might be causing the issue).

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik

[Rinke]

Thanx Stefan, good to know. Please keep me posted.

Have a good weekend.

[Stefan Nenchev]

Hello, Rinke,

After some further consideration, we have concluded that changing the default mode of the Input controls to Two-way is the preferable action in this situation. With this in mind, I have logged it as a feature request at our end - InputControls: Consider making the default binding of the Input controls to Two-way. I suggest you follow it in order to receive automatic notifications when an update is available. I have also added some points to your account for bringing up the issue.

Have a great week.

Regards,
Stefan Nenchev
Progress Telerik

[Rinke]

Okay, thanx for the credits.

Is this solution specific for the rating control only, or does it apply to all telerik controls in general when nested within a ListViewTemplateCell?

[Stefan Nenchev]

Hello, Rinke,

The behavior is related to the Input controls(Rating, AutoComplete, MaskedInput, etc) in which it is expected that a modification will be applied through the UI. With the current implementation, the default mode is OneWay which means that the update will happen only when the source property is changed. On the other hand, an interaction is expected with such type of controls and the value of the control is locally changed when working through the UI. This results in the undesired behavior, specifically in the RadListView which is a virtualized control(the view is not recreated for each item within the ItemsSource). So basically, being placed in a RadListView is the perfect environment for the behavior to represent itself and cause the visual glitch.

Regards,
Stefan Nenchev
Progress Telerik