iOS not displaying Selected Items fine on Android (2017.1.10321.233)

[Chris]

In my application I may have multiple select list on a single screen.  I do not know how many before the user launches the application.  My view is showing all of my data just fine.  However on the iOS only, it is not displaying the selecteditems in my "inside " list view.  When I leave the page and save results the data is correctly saving.  Additional note  If a listview item, isselected = true then on tapping it twice to set it back to false the selection changed does fire.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
             xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
             x:Class="LeadPod_FORMS.View.ActiveSurveyView"
             Style="{StaticResource backgroundStyle}">

    <Grid Margin="5,0,5,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="*" />
            <!--<RowDefinition Height="*" />-->
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" Style="{StaticResource headerStyle}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>


            <Button Grid.Row="0" Grid.Column="0" x:Name="LogOutBtn" Image="backArrow.png" Style="{StaticResource headerBackStyle}" HorizontalOptions="Start" Clicked="SaveBtnClick" />
            <Image Grid.Row="0" Grid.Column="1" Source="headerlogo.png" HorizontalOptions="Center" />

            <BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="#37225a" />
            <Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding surveyTitle}" Margin="20,0,0,0" VerticalOptions="Center" HorizontalOptions="Start" FontAttributes="Bold" Style="{StaticResource emailHeaderLabelStyle}" />
            <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding emailAddress}" Margin="0,0,20,0" VerticalOptions="Center" HorizontalOptions="End" Style="{StaticResource emailHeaderLabelStyle}" />
        </Grid>




    <telerikDataControls:RadListView x:Name="surveyListView" SelectionMode="None" Style="{StaticResource listViewStyle}" ItemsSource="{Binding Qualifiers}" Grid.Row="1">
      <telerikDataControls:RadListView.ItemStyle>
        <telerikListView:ListViewItemStyle  BorderColor="Transparent" BorderWidth="5" BorderLocation="Bottom"/>
      </telerikDataControls:RadListView.ItemStyle>
      <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
          <telerikListView:ListViewTemplateCell>
            <telerikListView:ListViewTemplateCell.View>
              <StackLayout>

                                <StackLayout Orientation="Horizontal" Style="{StaticResource menuBarStyle}" Margin="0" IsEnabled="{Binding isContact}" IsVisible="{Binding isContact}">
                                    <StackLayout Spacing="0">
                                        <Label x:Name="ScanFullName" Text="{Binding ScanFullName}" Style="{StaticResource contactNameLabelStyle}" />
                                        <Label x:Name="ScanTitleLbl" Text="{Binding ScanTitle}" Style="{StaticResource contactCompanyLabelStyle}" />
                                        <Label x:Name="ScanCompanyName" Text="{Binding ScanCompanyName}" Style="{StaticResource contactCompanyLabelStyle}" />
                                        <Label x:Name="MissingInfoParts" Text="{Binding MissingInfoParts}" HorizontalTextAlignment="Start" Style="{StaticResource errorLabelStyle}" IsEnabled="{Binding isMissingContactInfo}" IsVisible="{Binding isMissingContactInfo}" />
                                    </StackLayout>
                                    <Button Text="Edit" Clicked="EditDetailsBtnClick" HorizontalOptions="EndAndExpand" Style="{StaticResource buttonBarStyle}" />
                                </StackLayout>
                                <StackLayout Orientation="Horizontal" Style="{StaticResource menuBarStyle}" IsEnabled="{Binding isFooter}" IsVisible="{Binding isFooter}">
                                    <StackLayout.Margin>
                                        <OnPlatform x:TypeArguments="Thickness"
                                            iOS="0, 125, 0, 125"
                                            Android="0, 0,0, 0"
                                            WinPhone="0, 0, 0, 0" />
                                    </StackLayout.Margin>
                                    <Label Text=" " Style="{StaticResource contactNameLabelStyle}" />
                                </StackLayout>

                                <!--Single Select-->
                <StackLayout IsEnabled="{Binding QualifierisSingle}" IsVisible="{Binding QualifierisSingle}" Style="{StaticResource licenseListItemStyle}">
                  <Label Text="{Binding QualifierTitle}" Style="{StaticResource surveyTitleLabelStyle}" />
                  <telerikDataControls:RadListView SelectedItems="{Binding SelectedQualifierChoices}" BindingContextChanged="testUnfocused" ItemsSource="{Binding QualifierChoices}"  SelectionChanged="singleChanged" SelectionMode="Single">

                    <telerikDataControls:RadListView.ItemStyle>
                      <telerikListView:ListViewItemStyle BackgroundColor="Transparent" BorderLocation="None"/>
                    </telerikDataControls:RadListView.ItemStyle>
                    <telerikDataControls:RadListView.ItemTemplate>

                      <DataTemplate>
                        <telerikListView:ListViewTemplateCell>
                          <telerikListView:ListViewTemplateCell.View>
                          <StackLayout>
                            <Label Text="{Binding QualifierChoiceTitle}" Style="{StaticResource surveyChoiceLabelStyle}" />
                          </StackLayout>
                          </telerikListView:ListViewTemplateCell.View>
                        </telerikListView:ListViewTemplateCell>
                      </DataTemplate>
                    </telerikDataControls:RadListView.ItemTemplate>
                  </telerikDataControls:RadListView>
                </StackLayout>

                <!--Multi Select-->
                <StackLayout IsEnabled="{Binding QualifierisMulti}" IsVisible="{Binding QualifierisMulti}" Style="{StaticResource licenseListItemStyle}">
                  <Label Text="{Binding QualifierTitle}" Style="{StaticResource surveyTitleLabelStyle}" />
                  <telerikDataControls:RadListView SelectedItems="{Binding SelectedQualifierChoices}" BindingContextChanged="testUnfocused" ItemsSource="{Binding QualifierChoices}"  SelectionChanged="singleChanged" SelectionMode="Multiple">
                    <telerikDataControls:RadListView.ItemStyle>
                      <telerikListView:ListViewItemStyle BackgroundColor="Transparent" BorderLocation="None"/>
                    </telerikDataControls:RadListView.ItemStyle>
                    <telerikDataControls:RadListView.SelectedItemStyle>
                      <telerikListView:ListViewItemStyle BackgroundColor="#bdafcf" BorderWidth="2" BorderLocation="All"/>
                    </telerikDataControls:RadListView.SelectedItemStyle>
                    <telerikDataControls:RadListView.ItemTemplate>
                      <DataTemplate>
                        <telerikListView:ListViewTemplateCell>
                          <telerikListView:ListViewTemplateCell.View>
                            <StackLayout>
                              <Label Text="{Binding QualifierChoiceTitle}" Style="{StaticResource surveyChoiceLabelStyle}" />
                            </StackLayout>
                          </telerikListView:ListViewTemplateCell.View>
                        </telerikListView:ListViewTemplateCell>
                      </DataTemplate>
                    </telerikDataControls:RadListView.ItemTemplate>
                  </telerikDataControls:RadListView>
                </StackLayout>

                <!--Numeric-->
                <StackLayout IsEnabled="{Binding QualifierisNumber}" IsVisible="{Binding QualifierisNumber}" Style="{StaticResource licenseListItemStyle}">
                  <StackLayout Orientation="Horizontal">
                  <Label Text="{Binding QualifierTitle}" Style="{StaticResource surveyTitleLabelStyle}" />
                    <Label BindingContext="{x:Reference slider}" Style="{StaticResource surveyNumericLabelStyle}" Text="{Binding Value, StringFormat='{0:F0}'}" />
                    </StackLayout>
                  <Slider x:Name="slider" VerticalOptions="CenterAndExpand" HeightRequest="45" Maximum="{Binding QualifierMaxValue}" Minimum="{Binding QualifierMinValue}" Value="{Binding QualifierIntValue}" ValueChanged="sliderValChanged" />




                </StackLayout>


                <!--Text Area-->
                                <StackLayout IsEnabled="{Binding QualifierisNote}" IsVisible="{Binding QualifierisNote}" Style="{StaticResource licenseListItemStyle}">
                                    <Label Text="{Binding QualifierTitle}" Style="{StaticResource surveyTitleLabelStyle}" />
                                    <ContentView Style="{StaticResource BorderStyle}" >
                                        <ContentView Style="{StaticResource InternalViewStyle}">
                                            <Editor HeightRequest="100" IsEnabled="{Binding QualifierisNote}" IsVisible="{Binding QualifierisNote}" Text="{Binding QualifierStringValue}" Style="{StaticResource surveyEditorStyle}" />
                                        </ContentView>
                                    </ContentView>
                                </StackLayout>
                            </StackLayout>
            </telerikListView:ListViewTemplateCell.View>
          </telerikListView:ListViewTemplateCell>
        </DataTemplate>
      </telerikDataControls:RadListView.ItemTemplate>
<telerikDataControls:RadListView.LayoutDefinition>
          <telerikListView:ListViewLinearLayout VerticalItemSpacing="1" />
        </telerikDataControls:RadListView.LayoutDefinition>

    </telerikDataControls:RadListView>



  </Grid>



</ContentPage>

Some code behind workings:

void singleChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs args)
        {

            if (((Telerik.XamarinForms.DataControls.RadListView)sender).ItemsSource != null)
            {
                if (args.OldItems != null)
                {
                    //item is beind set to false
                    LeadPod_FORMS.ViewModel.ActiveQualifierChoiceViewModel changedItem = (LeadPod_FORMS.ViewModel.ActiveQualifierChoiceViewModel)args.OldItems[0];


                    foreach (LeadPod_FORMS.ViewModel.ActiveQualifierChoiceViewModel i in ((Telerik.XamarinForms.DataControls.RadListView)sender).ItemsSource)
                    {
                        if (changedItem.QUalifierChoiceID == i.QUalifierChoiceID)
                        {
                            ((Telerik.XamarinForms.DataControls.RadListView)sender).SelectedItems.Remove(changedItem);
                        }

                    }

                }

                else
                {
                    LeadPod_FORMS.ViewModel.ActiveQualifierChoiceViewModel changedItem = (LeadPod_FORMS.ViewModel.ActiveQualifierChoiceViewModel)((Telerik.XamarinForms.DataControls.RadListView)sender).SelectedItem;

                    if (changedItem != null)
                    {
                        foreach (LeadPod_FORMS.ViewModel.ActiveQualifierChoiceViewModel i in ((Telerik.XamarinForms.DataControls.RadListView)sender).ItemsSource)
                        {
                            if (changedItem.QUalifierChoiceID == i.QUalifierChoiceID)
                            {
                                ((Telerik.XamarinForms.DataControls.RadListView)sender).SelectedItems.Add(changedItem);
                            }

                        }
                    }
                    //item is being set to true
                }

            }
}

void testUnfocused(object sender, EventArgs args)
        {
            if (((Telerik.XamarinForms.DataControls.RadListView)sender).ItemsSource != null)
            {
                foreach (LeadPod_FORMS.ViewModel.ActiveQualifierChoiceViewModel i in ((Telerik.XamarinForms.DataControls.RadListView)sender).ItemsSource)
                {
                    if(i.QualifierChoiceIsSelected)
                    {
                        ((Telerik.XamarinForms.DataControls.RadListView)sender).SelectedItems.Add(i);
                    }
                }
            }
        }

 

Again the Android version works perfectly, but the iOS version is not displaying the SelectedItems when the screen loads.  Any help would greatly be appreciated.  I am guessing the main problem is having a listview inside a listview, but I don't understand why that is preventing the UI from showing what is selected.  I have checked on load, and the Listview does infact have the proper items inside the selecteditems collection, it is just not showing them.

 

Thanks in advance for any help

 

 

[Chris]

Some of the ViewModels being used:

public class ActiveSurveyViewModel
    {
        public int ScanLocalID { get; set; }
        public string ScanFullName { get; set; }
        public string ScanCompanyName { get; set; }
        public string ScanTitle { get; set; }
        public Boolean isMissingContactInfo { get; set; }
        public String MissingInfoParts { get; set; }
        public string emailAddress { get; set; }
        public string surveyTitle { get; set; }
        public ObservableCollection<ViewModel.ActiveQualifierViewModel> Qualifiers { get; set; }
}

 

public class ActiveQualifierViewModel
    {
        public int QualifierID { get; set; }
        public int QualifierPresentationOrder { get; set; }
        public string QualifierTitle { get; set; }
        public bool QualifierisMulti { get; set; }
        public bool QualifierisSingle { get; set; }
        public ObservableCollection<ActiveQualifierChoiceViewModel> QualifierChoices { get; set; }
        public ObservableCollection<ActiveQualifierChoiceViewModel> SelectedQualifierChoices { get; set; }
        public bool QualifierisNumber { get; set; }
        public double QualifierMinValue { get; set; }
        public double QualifierMaxValue { get; set; }
        public double QualifierIntValue { get; set; }
        public string QualifierNumericString { get; set; }
        public bool QualifierisNote { get; set; }
        public string QualifierStringValue { get; set; }
        public bool isFooter { get; set; }
        public bool isContact { get; set; }
        public string ScanFullName { get; set; }
        public string ScanCompanyName { get; set; }
        public string ScanTitle { get; set; }
        public Boolean isMissingContactInfo { get; set; }
        public String MissingInfoParts { get; set; }
}

 

public class ActiveQualifierChoiceViewModel
    {
        public int QUalifierChoiceID { get; set; }
        public int QualifierChoicePresentationOrder { get; set; }
        public string QualifierChoiceTitle { get; set; }
        public bool QualifierChoiceIsSelected { get; set; }
    }

 

 

 

 

 

[Chris]

Edited to simplify the issue.  The outer Listview is called "surveyListView"

 

The "inner" listview starts just under the <!--Multi Select--> comment

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
             xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
             x:Class="LeadPod_FORMS.View.ActiveSurveyView"
             Style="{StaticResource backgroundStyle}">

    <Grid Margin="5,0,5,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="*" />
            <!--<RowDefinition Height="*" />-->
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Style="{StaticResource headerStyle}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Row="0" Grid.Column="0" x:Name="LogOutBtn" Image="backArrow.png" Style="{StaticResource headerBackStyle}" HorizontalOptions="Start" Clicked="SaveBtnClick" />
            <Image Grid.Row="0" Grid.Column="1" Source="headerlogo.png" HorizontalOptions="Center" />
            <BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="#37225a" />
            <Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding surveyTitle}" Margin="20,0,0,0" VerticalOptions="Center" HorizontalOptions="Start" FontAttributes="Bold" Style="{StaticResource emailHeaderLabelStyle}" />
            <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding emailAddress}" Margin="0,0,20,0" VerticalOptions="Center" HorizontalOptions="End" Style="{StaticResource emailHeaderLabelStyle}" />
        </Grid>
    <telerikDataControls:RadListView x:Name="surveyListView" SelectionMode="None" Style="{StaticResource listViewStyle}" ItemsSource="{Binding Qualifiers}" Grid.Row="1">
      <telerikDataControls:RadListView.ItemStyle>
        <telerikListView:ListViewItemStyle  BorderColor="Transparent" BorderWidth="5" BorderLocation="Bottom"/>
      </telerikDataControls:RadListView.ItemStyle>
      <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
          <telerikListView:ListViewTemplateCell>
            <telerikListView:ListViewTemplateCell.View>
              <StackLayout>

                <!--Multi Select-->
                <StackLayout IsEnabled="{Binding QualifierisMulti}" IsVisible="{Binding QualifierisMulti}" Style="{StaticResource licenseListItemStyle}">
                  <Label Text="{Binding QualifierTitle}" Style="{StaticResource surveyTitleLabelStyle}" />
                  <telerikDataControls:RadListView SelectedItems="{Binding SelectedQualifierChoices}" BindingContextChanged="testUnfocused" ItemsSource="{Binding QualifierChoices}"  SelectionChanged="singleChanged" SelectionMode="Multiple">
                    <telerikDataControls:RadListView.ItemStyle>
                      <telerikListView:ListViewItemStyle BackgroundColor="Transparent" BorderLocation="None"/>
                    </telerikDataControls:RadListView.ItemStyle>
                    <telerikDataControls:RadListView.SelectedItemStyle>
                      <telerikListView:ListViewItemStyle BackgroundColor="#bdafcf" BorderWidth="2" BorderLocation="All"/>
                    </telerikDataControls:RadListView.SelectedItemStyle>
                    <telerikDataControls:RadListView.ItemTemplate>
                      <DataTemplate>
                        <telerikListView:ListViewTemplateCell>
                          <telerikListView:ListViewTemplateCell.View>
                            <StackLayout>
                              <Label Text="{Binding QualifierChoiceTitle}" Style="{StaticResource surveyChoiceLabelStyle}" />
                            </StackLayout>
                          </telerikListView:ListViewTemplateCell.View>
                        </telerikListView:ListViewTemplateCell>
                      </DataTemplate>
                    </telerikDataControls:RadListView.ItemTemplate>
                  </telerikDataControls:RadListView>
                </StackLayout>


                            </StackLayout>
            </telerikListView:ListViewTemplateCell.View>
          </telerikListView:ListViewTemplateCell>
        </DataTemplate>
      </telerikDataControls:RadListView.ItemTemplate>
<telerikDataControls:RadListView.LayoutDefinition>
          <telerikListView:ListViewLinearLayout VerticalItemSpacing="1" />
        </telerikDataControls:RadListView.LayoutDefinition>

    </telerikDataControls:RadListView>
  </Grid>

</ContentPage>

 

 

[Chris]

Looks like in my changes I broke the Android version as well  here is the working android code.  Below is the replacement piece that makes the Android version work,  but it still does not work on iOS

void singleChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs args)
        {
List<LeadPod_FORMS.ViewModel.ActiveQualifierChoiceViewModel> selectedItems = new List<ViewModel.ActiveQualifierChoiceViewModel>();
            var selectListQuestion = (Telerik.XamarinForms.DataControls.RadListView)sender;
            foreach (var a in ((Telerik.XamarinForms.DataControls.RadListView)sender).SelectedItems)
            {
                LeadPod_FORMS.ViewModel.ActiveQualifierChoiceViewModel sA = (LeadPod_FORMS.ViewModel.ActiveQualifierChoiceViewModel)a;
                selectedItems.Add(sA);
            }
            if (((Telerik.XamarinForms.DataControls.RadListView)sender).ItemsSource != null)
            {
                foreach (LeadPod_FORMS.ViewModel.ActiveQualifierChoiceViewModel i in ((Telerik.XamarinForms.DataControls.RadListView)sender).ItemsSource)
                {
                    if (selectedItems.Where(x => x.QUalifierChoiceID == i.QUalifierChoiceID).Any())
                    {
                        i.QualifierChoiceIsSelected = true;
                    }
                    else
                    {
                        if (args.OldItems != null)
                        {
                            i.QualifierChoiceIsSelected = false;
                        }
                    }
                }
            }
}

[Stefan Nenchev]

Hi Chris,

The information you have provided does not seem sufficient for us to recreate the issue and be sure we are performing the same steps as you do. It would be great if you can isolate the issue in a working sample application and provide it to us so we can have a more detailed look at your exact scenario. You can raise a support ticket as you can directly attach files there. 

I would also like to inform you that currently we are working on improvements to the selection mechanism and some of them will be available with the next minor build(most probably next Friday). With this in mind, you can test the behavior once the new version is available.

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik

[Chris]

Thanks,  I have actually updates to the latest build.

Unfortunately this has introduced a new problem with out correcting the old one.  Now the Select list will not display at all...sometimes.  Sometimes it will not display sometimes it will.  Again only on iOS  But it will never show the selected items, also again only on iOS.

I'll build out a simplified version and send it as soon as I can.  And attacha ticket to this Thanks

 

Chris

[Chris]

*Updated to the latest Telerik dlls using nuget.

[Stefan Nenchev]

Hi,

If someone comes across the thread, I just wanted to share that we have concluded that the issue is caused by a bug in the selection mechanism so we have logged it in our system. It can be tracked on the following link from our Ideas & Feedback portal - ListView [iOS]: Initially selected items do not look selected. 

Furthermore, we are currently working on making the SelectedItems property a bindable one so it should be helpful in such scenarios. The change should be included in some of the next minor releases. It can be tracked here - ListView: Make SelectedItems bindable property.

Regards,
Stefan Nenchev
Progress Telerik