incorrect values using Rating within ListViewTemplateCell

9 posts, 1 answers
  1. Rinke
    Rinke avatar
    5 posts
    Member since:
    Jan 2016

    Posted 12 Nov Link to this post

    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);
            }
        }

     

     

     

  2. Rinke
    Rinke avatar
    5 posts
    Member since:
    Jan 2016

    Posted 12 Nov in reply to Rinke Link to this post

    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

  3. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    556 posts

    Posted 15 Nov Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. Rinke
    Rinke avatar
    5 posts
    Member since:
    Jan 2016

    Posted 16 Nov in reply to Stefan Nenchev Link to this post

    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

  5. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    556 posts

    Posted 21 Nov Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Rinke
    Rinke avatar
    5 posts
    Member since:
    Jan 2016

    Posted 22 Nov in reply to Stefan Nenchev Link to this post

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

    Have a good weekend.

  7. Answer
    Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    556 posts

    Posted 27 Nov Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Rinke
    Rinke avatar
    5 posts
    Member since:
    Jan 2016

    Posted 27 Nov in reply to Stefan Nenchev Link to this post

    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?

  9. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    556 posts

    Posted 27 Nov Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top