Load on Demand - manual button does not appear

[Mikhail]

Hi,

I am using Load on Demand functionality in manual mode. I am customizing Load and Loading indicators. However, Loading indicator never shows, and after one load, the Load indicator does not reappear.

Sample XAML code is below

<telerikDataControls:RadListView x:Name="PeopleListView"
                                     BackgroundColor="White"
                                 ItemsSource="{Binding Employees}"
                                 IsLoadOnDemandEnabled="True"
                                 LoadOnDemand="Handle_LoadOnDemand"
                                 LoadOnDemandMode="Manual"
                                 IsItemSwipeEnabled="True"
                                 ItemSwiping="PeopleListView_ItemSwiping"
                                 SwipeOffset="160, 0, 0, 0"
                                 SwipeThreshold="10"
                                 SelectionGesture="Tap"
                                 SelectionMode="Single"
                                 SelectionChanged="PeopleListView_SelectionChanged"
                                 IsVisible="{Binding IsBusy, Converter={StaticResource InverseBoolConverter}">

        <telerikDataControls:RadListView.ItemTemplate>
            <DataTemplate>
                <telerikListView:ListViewTemplateCell>
                    <telerikListView:ListViewTemplateCell.View>
                        <Grid BackgroundColor="White">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"></RowDefinition>
                                <RowDefinition></RowDefinition>
                            </Grid.RowDefinitions>

                            <Image Source="{Binding PhotoData}"
                               Grid.RowSpan="2"
                               Grid.Column="0"
                               HeightRequest="70"
                               WidthRequest="70"></Image>
                            <Label Grid.Column="1" Grid.Row="0" Margin="0,3,0,0"
                               FontSize="Medium" Text="{Binding FullName}"></Label>
                            <Label Grid.Column="1" Grid.Row="1"
                               VerticalTextAlignment="Start" VerticalOptions="Start"
                               Text="{Binding EmployeeTitle}"></Label>
                            <Image Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" Source="icon"
                                WidthRequest="30" HeightRequest="30">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="Handle_Tapped"></TapGestureRecognizer>
                                </Image.GestureRecognizers>
                            </Image>
                        </Grid>
                    </telerikListView:ListViewTemplateCell.View>
                </telerikListView:ListViewTemplateCell>
            </DataTemplate>
        </telerikDataControls:RadListView.ItemTemplate>

            <telerikDataControls:RadListView.LoadOnDemandItemTemplate>
                <DataTemplate>
                    <Grid BackgroundColor="Red">
                        <Label FontSize="24" HorizontalOptions="Center" Text="Load more" TextColor="Navy"></Label>
                    </Grid>
                </DataTemplate>
            </telerikDataControls:RadListView.LoadOnDemandItemTemplate>

            <telerikDataControls:RadListView.LoadingOnDemandItemTemplate>
                <DataTemplate>
                    <Grid BackgroundColor="Green">
                        <Label FontSize="24" HorizontalOptions="Center" Text="... Loading ..." TextColor="Navy"></Label>
                    </Grid>
                </DataTemplate>
            </telerikDataControls:RadListView.LoadingOnDemandItemTemplate>
    </telerikDataControls:RadListView>

 

The sample load handler is below

async void Handle_LoadOnDemand(object sender, System.EventArgs e)
        {
            await Task.Delay(4000);

            var service = new MockEmployeeService();
            var data = service.GetEmployees();
            int i = 0;
            foreach (var item in data)
            {
                i++;
                item.EmployeeTitle = "LOD " + i;
                item.FirstName = "LOD " + i;
                ((ViewModel)this.BindingContext).Employees.Add(item);

            }
        }

 

The sample project is attached - project. Please let me know how to resolve this - I suspect I'm missing something in XAML, etc.

Thank you very much.

 

[Stefan Nenchev]

Hi, Mikhail,

I have tested the sample project you have provided and set a ListViewLoadOnDemandCollection as the ItemsSource of the RadListView and the behavior is working as expected. Please have a look at the modified sample. I see that you are also using a BusyIndicator, however, it does not seem intuitive to use both a BusyIndicator and the ItemLoadingIndicator, so I suggest choosing one of them. Would such approach of using ListViewLoadOnDemandCollection as a source work for you?

Regards,
Stefan Nenchev
Progress Telerik

[Mikhail]

Hi Stefan,

thank you for reply. This solution works well on Android, but not on iOS.

On iOS is see the initial "Load more" button, when I click on it - it disappears. The "Loading..." indicator never shows. After loading is done, the "Load more" button never reappears.

The busy indicator is only used on initial load of the list - to show users that something is happening. After that, only the ItemLoadingIndicator is used. I took out busy indicator for testing and the same behaviour is observed on iOS.

Thank you for your help.

Mikhail

[Mikhail]

I noticed something interesting. On iOS, the "Load more" button (and I guess "Loading..." indicator too?) is invisible. After the "Load more" button disappears (after clicking on it once), clicking on the area where button is supposed to be triggers loading more items.

[Stefan Nenchev]

Hi, Mikhail,

Thank you for the clarification. Indeed, the functionality seems broken in iOS. I have tested some different versions and it is working fine with 2017.3.926 so it seems that we have applied some modification that affected the behavior. We will have a more detailed look at our end and update the thread once we have more information on the matter. 

Have a great weekend.

Regards,
Stefan Nenchev
Progress Telerik

[Stefan Nenchev]

Hello, Mikhail,

Thanks for your patience.

We have reviewed the behavior, but unfortunately could not easily identify what is causing the issue. We have reviewed the modifications we have applied that might have affected the functionality but none of them has something to do with the undesired effect so we believe it might be a change in Xamarin.Forms that could have affected it. With this in mind, I have logged the behavior as a bug report at our end. You can track its progress on the following link from our Ideas & Feedback portal - ListView: [iOS]Customized "Load More" button is not visible once clicked. Please follow the item in order to subscribe to automatic notifications. I have added some points to your account for reporting the issue.

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik