Under Review
Last Updated: 26 Aug 2021 12:43 by ADMIN
Ganpat
Created on: 19 Aug 2021 16:33
Category: UI for Xamarin
Type: Bug Report
0
Telerik Listview Sticky Header not working correctly on iOS side

I want to use a sticky header listview. 
I using the following code to render the sticky header list.

XML page code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     x:Class="TEST.Views.AboutPage"
     xmlns:vm="clr-namespace:TEST.ViewModels"

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

     Title="{Binding Title}"
>

    <ContentPage.BindingContext>
        <vm:AboutViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="Accent">#96d1ff</Color>
        </ResourceDictionary>
        <DataTemplate x:Key="ListViewItemTemplate">
            <telerikListView:ListViewTemplateCell>
                <telerikListView:ListViewTemplateCell.View>
                    <Grid Padding="16, 0, 0, 0" BackgroundColor="#F1F2F5" HeightRequest="100">
                        <Label Text="{Binding Name}" TextColor="#6F6F70" FontSize="Small" />
                    </Grid>
                </telerikListView:ListViewTemplateCell.View>
            </telerikListView:ListViewTemplateCell>
        </DataTemplate>
        <DataTemplate x:Key="ListViewGroupHeaderTemplate">
            <Grid HeightRequest="40">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>                
                <Label Margin="0, 12, 0, 6" Text="{Binding }" Grid.Column="1" TextColor="DarkGray" FontSize="Medium" HorizontalOptions="Start" />
            </Grid>
        </DataTemplate>
        <telerikListView:ListViewGroupStyle x:Key="ListViewGroupHeaderStyle" BackgroundColor="White" />
    </ContentPage.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>       
            <telerikDataControls:RadListView
                x:Name="listView"
                ItemsSource="{Binding Cities}"
                ItemTemplate="{StaticResource ListViewItemTemplate}"
                GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}"
                GroupHeaderStyle="{StaticResource ListViewGroupHeaderStyle}"
                IsGroupHeaderSticky="True"
                Grid.Row="0"
            >
                <telerikDataControls:RadListView.GroupDescriptors>
                    <telerikListView:PropertyGroupDescriptor PropertyName="Country"/>
                </telerikDataControls:RadListView.GroupDescriptors>

                <telerikDataControls:RadListView.LayoutDefinition>
                    <telerikListView:ListViewGridLayout HorizontalItemSpacing="5"
                                                        ItemLength="120"
                                                        SpanCount="2"
                                                        VerticalItemSpacing="5" />
                </telerikDataControls:RadListView.LayoutDefinition>
            </telerikDataControls:RadListView>
    </Grid>

</ContentPage>

 

 

ViewModels:

public class City
    {
        public string Name { get; set; }
        public string Country { get; set; }
    }

    public class ViewModel
    {
        public ObservableCollection<City> Cities { get; set; }

        public ViewModel()
        {
            this.Cities = new ObservableCollection<City>()
            {
                new City() { Name = "Barcelona", Country = "Spain"},
                new City() { Name = "Madrid", Country = "Spain"},
                new City() { Name = "Barcelona", Country = "Spain"},
                new City() { Name = "Madrid", Country = "Spain"},
                new City() { Name = "Rome", Country = "Italy"},
                new City() { Name = "Florence", Country = "Italy"},
                new City() { Name = "Florence", Country = "Italy"},
                new City() { Name = "London", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "Boston", Country = "USA"}
             };
        }
    }



I added screenshots here which until header "Italy" works correctly, but later  "Spain" & "USA" header are not sticking as we scroll up.             
1 comment
ADMIN
Didi
Posted on: 26 Aug 2021 12:43

Hello Ganpat,

I have tested the scenario and reproduced a behavior with Spain group, but this is not actually an issue. You reaches the end of the scrollview which is internally in the ListView and the ListView pushes up the items that are at the end of the scrollview. Then Spain is displayed as a sticky group header. I have attached a video. Please download and check on your side.  Spain overlaps the Barcelona text. The same behavior observes when ListView layout definition is linear. 

On which iOS device/simulator version you have tested? Also if you can send a video from the behavior on your side. It seems different than the behavior on my side. 

Regards,
Didi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.