Telerik RadListView failing to render Grouped List Items correctly on iOS (MAUI .NET7)

1 Answer 303 Views
ListView
Robert
Top achievements
Rank 1
Robert asked on 25 Oct 2023, 12:13 AM

Hi,

We are in process of porting Xamarin Forms app to MAUI. 

There's some very bad rendering issues when use Telerik RadListView (in Grouped List mode) under iOS that are working fine for Android.

As per screenshot attached - the List Items on iOS are suffering from these problems which we don't see on Android : 

  • Dynamic Item Heights are being ignored on iOS. (all items are same height even though they are varying heights as per Android)
  • Margins/Spacing around Items (root UIElement inside the DataTemplate have Margins set) are being ignored on iOS - as per screenshot there is no spacing between items and items are rendering to edge of control.

Some additional notes on versions :

  • Using latest MAUI .NET7 - 7.0.96 (SR8)
  • Using Telerik Controls - 6.3.0

Screenshots are from Emulators (Android 13 and iOS 16.4) - however same behaviour observed on devices and other os versions too.

Can you please advise further & if an update will be provided to address these problems.

 

thanks

Niall

 

 

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 27 Oct 2023, 11:26 AM

Hi Robert,

Thank oyu for the provided image and details.

Could you please send us more details:

1) Whether the groups are sticky?

2) Send us the group header template and the complete ListView definition.

We have this issue logged: https://feedback.telerik.com/maui/1591230-listview-ios-maccatalyst-slow-performance-when-groups-are-sticky-and-group-header-template-is-used 

So I will need the exact implementation you have so I can research the case further.

Regards,
Didi
Progress Telerik

A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com
Robert
Top achievements
Rank 1
commented on 30 Oct 2023, 02:48 AM | edited

(EDIT/FYI: Tried this with updated 6.4.0 release and seeing same issues)

Hi Didi,

To answer your questions above :

1) We have this implemented in several places in the App, both with and without Sticky group headers and seeing exact same behaviour with the child ListItems (ItemTemplate) rendering - so this definitely is not a factor/cause.

2) Here is some templates - again we have a lot of different datatypes/implementations of this but seeing same issue with child ItemTemplates.

An example Group Header Template below (this is one of the simpler ones with just a rounded border and heading text : 

 <DataTemplate x:Key="CustomOrderGroupHeaderTemplate">
     <Grid BackgroundColor="Transparent" Margin="0,0,0,0">
         <Grid BackgroundColor="{StaticResource MocoNewPageBackground}"  HorizontalOptions="Fill" VerticalOptions="Fill" Margin="0,0,0,8">
             <Border Margin="8,8,8,0" Style="{StaticResource DialogBorderCornerStyle}" StrokeThickness="0" Padding="0" VerticalOptions="End">
                 <Grid BackgroundColor="{StaticResource MocoNewGroupHeaderBackgroundColor}" HorizontalOptions="Fill" >
                     <Label Text="{Binding Key}" 
                            FontAttributes="Bold"
                            Style="{StaticResource CustomListGroupHeaderStyle}" 
                            TextColor="{StaticResource MocoNewAlmostBlack}" 
                            VerticalOptions="Center"
                            Margin="12,4,4,4"/>
                 </Grid>
             </Border>
         </Grid>
     </Grid>
 </DataTemplate>
For the List here is an example with some associated templates : 


     <telerikControls:RadListView Grid.Row="1" ItemsSource="{Binding CombinedLists}"
                                  GroupHeaderTemplate="{StaticResource CustomListGroupHeaderTemplate}"
                                  ItemTemplate="{StaticResource CardedListsItemTelerikTemplate}"
                                  SelectionMode="None"
                                  IsGroupHeaderSticky="True"
                                  Margin="8,0,8,0"
                                  FooterTemplate="{StaticResource Spacer24Template}"
                                  GroupHeaderStyle="{StaticResource TelerikListViewPlainGroupStyle}"
                                  ItemStyle="{StaticResource TelerikListViewPlainItemStyle}"
                                  IsVisible="{Binding IsLoadingLists, Converter={StaticResource InverseBoolConverter}}"
                                  >
         <!-- HeaderTemplate="{StaticResource Spacer16Template}"-->
         <telerikControls:RadListView.PressedItemStyle>
             <telerikListViewSupport:ListViewItemStyle BackgroundColor="#F0F0F0" 
                                                       TextCellTextColor="Transparent"
                                                       BorderColor="Transparent" 
                                                       BorderWidth="0" 
                                                       BorderLocation="None"/>
         </telerikControls:RadListView.PressedItemStyle>
         <telerikControls:RadListView.Commands>
             <helpers:TelerikGroupHeaderNoExpandCommand/>
             <telerikListViewCommands:ListViewUserCommand Id="ItemTap" Command="{Binding ListItemClickedTelerikCommand}" />
         </telerikControls:RadListView.Commands>
         <telerikControls:RadListView.GroupDescriptors>
             <telerikListViewSupport:ListViewPropertyGroupDescriptor PropertyName="GroupKey"/>
         </telerikControls:RadListView.GroupDescriptors>
     </telerikControls:RadListView>

    <telerikListViewSupport:ListViewItemStyle 
        x:Key="TelerikListViewPlainItemStyle"
        BackgroundColor="Transparent"
        TextCellTextColor="{StaticResource MocoNewAlmostBlack}"
        BorderColor="Transparent"                                                
        BorderWidth="0"
        BorderLocation="None" 
    />

    <telerikListViewSupport:ListViewGroupStyle 
        x:Key="TelerikListViewPlainGroupStyle"
        BackgroundColor="Transparent"
        BorderColor="Transparent"                                                
        BorderWidth="0"
        BorderLocation="None" 
    />

    <DataTemplate x:Key="Spacer24Template">
        <Grid HeightRequest="24"/>
    </DataTemplate>


For ItemTemplates - don't want to post full contents (for commercial sensitivity) but here is root elements which should provide enough details : 

 <DataTemplate x:Key="CardedListsItemTelerikTemplate" x:DataType="model:CustomList">
     <telerikListViewSupport:ListViewTemplateCell>
         <telerikListViewSupport:ListViewTemplateCell.View>
             <Border BackgroundColor="{StaticResource MocoWhite}" Margin="8,4,8,4">
                 <Border.StrokeShape>
                     <RoundRectangle CornerRadius="6"/>
                 </Border.StrokeShape>
                 <Grid ColumnSpacing="0" Margin="0" HorizontalOptions="Fill">

  <!-- .....  content in here - some templates have UserControls others have full Xaml ... -->
                     
                 </Grid>
             </Border>
         </telerikListViewSupport:ListViewTemplateCell.View>
     </telerikListViewSupport:ListViewTemplateCell>
 </DataTemplate>
In a nutshell though (and from previous post with screenshots) you can see 2 x core issues are happening : 

- The Margin on root <Border/> element is basically being ignored no matter what we specify on iOS (works fine on Android). Some of the usages have much larger margins too (ie. 16,8).

- The contents inside the Grid has dynamic heights (and needs to correctly work for multiple form factos/scaling etc PLUS some need to be different heights to other items) & hence we can't specific a fixed item height.  The final desired heights & as per screenshot is being ignored & on iOS it's clipping items vertically (by a large amount - ie. 2/3 of it missing) and making every single item the same height.

As above, this is happening everywhere we are using the Telerik RadListView on iOS. If I use the Syncfusion control (which is missing some things we need) it works OK. 

Hope that provides enough information for you to proceed and figure out why these problems are happening. 

Thanks
Niall
 

 

 

 

Didi
Telerik team
commented on 02 Nov 2023, 02:23 PM

Hi Robert, 

Thank you for the provided code. I tested the case in a sample app and reproduced the behaviors:

Dynamic Item Heights are being ignored on iOS. (all items are same height even though they are varying heights as per Android)
Margins/Spacing around Items (root UIElement inside the DataTemplate have Margins set) are being ignored on iOS - as per screenshot there is no spacing between items and items are rendering to edge of control.

Solution:

Dynamic item height

The behavior is because of the Grid layout usage with Star sized row. We have it logged here: https://feedback.telerik.com/maui/1602046-listview-ios-content-is-not-property-visualized-when-nesting-many-grid-layouts-in-the-template-and-using-gird-rows-with-auto-and-definitive-height There are several issues in Maui layouts that affects the controls. I understand the the issue happens only on iOS still these are native controls and have native representation. 
In order to solve the behavior, set the grid row definition to Auto. 

Spacing between the items

I have logged the behavior here https://feedback.telerik.com/maui/1629672-listview-ios-maccatalyst-margin-in-the-template-is-not-respected 

As a solution you can use the linear layout and set spacing between the elements: https://docs.telerik.com/devtools/maui/controls/listview/layouts 

Hope the suggestions will be of help.

 

 

Robert
Top achievements
Rank 1
commented on 02 Nov 2023, 10:43 PM

Hi Didi,

I have also found some further/better solutions for these issues.

Item Spacing : The issue is the Telerik RadListView is ignoring the Margin/Padding attributes on the root element (inside the ListViewTemplateCell.View element).  The fix for this is to wrap whatever contents are in there with a Grid element and then the child element of that would have the desired Margin/Padding set.  This is much preferred solution to yours as I don't want to be using LinearLayout because I need to support multiple columns when App is being used on a Tablet/Landscape device.

Dynamic Height: I found similar solution to you - simply set this new root Grid element (as per fix above) with Attribute RowDefinitions="Auto" and it seems to fix things - seems to work even if inner content has a Grid with * sizing for row definitions.

Hence - the working fix is as follows : 

<DataTemplate x:Key="MyItemTemplate">
                <telerikListViewSupport:ListViewTemplateCell>
                    <telerikListViewSupport:ListViewTemplateCell.View>
                        <Grid RowDefinitions="Auto">  <!-- Add This Root Wrapping Element -->
                            <WhateverLayoutElement Margin="8,8,8,4" Padding="8">
                               ......
                            </WhateverLayoutElement>
                        </Grid> <!-- Close This Root Wrapping Element -->
                    </telerikListViewSupport:ListViewTemplateCell.View>
                </telerikListViewSupport:ListViewTemplateCell>
</DataTemplate>

 Where 'WhateverLayoutElement' could be any type of View (ie. Grid, Border, Custom Control etc) and contains the Margin/Padding you originally wanted to be observed by the ItemTemplates...

This solution works for both Android and iOS.

Note - I would conclude this spacing between items bug is specific to the Telerik RadListView Control as neither the Syncfusion (SfListView) nor MAUI Native controls (CollectionView) suffer from this issue.  I can see from occasional errors being thrown on iOS that your RadListView is wrapping the same UICollectionView as the others too.

thanks
Niall

 

Didi
Telerik team
commented on 03 Nov 2023, 06:19 AM

I am glad you have find different approach to workaround the behaviors. 

Regarding to the spacing, in my previous comment I shared the logged bug report: https://feedback.telerik.com/maui/1629672-listview-ios-maccatalyst-margin-in-the-template-is-not-respected 

Tags
ListView
Asked by
Robert
Top achievements
Rank 1
Answers by
Didi
Telerik team
Share this question
or