From the Help Page...

The ListView provides UI virtualization, which requires the visual parent to provide vertical or horizontal space. To avoid breaking UI virtualization or gesture mechanisms:

• Do not place the ListView inside a StackLayout or inside a ScrollView.
• Do not set the ListView to a RowDefinition Height="Auto" Grid definition.

Does this mean that a ListView cant be placed as a child of a Scroll View under any circumstance, or its immediate parent cant be a ScrollView? Same question for the Grid RowDefinition. If using nested grids, must all parent grids rows have a Height specified, or is it only the immediate parent? Also is * ok for the Height?

Seems like ListView is severely limited to being the only control on the page/view if this is the case.

I have worked through the grouping help docs to set up a ListView with grouping. I would like to provide a means to group the list elements as follows..

When the Group By Gateway switch is on the list is grouped as shown above. When the switch is off it shows the list without the group headers as shown below....

I have tried to meld the example code to meet my desired outcome by binding the switch to the following property on the view model.

	private bool _isNodeIdGroupSwitchToggled = false;
	public bool IsNodeIdGroupSwitchToggled
	{
		get { return _isNodeIdGroupSwitchToggled; }
		set
		{
			if (SetProperty(ref _isNodeIdGroupSwitchToggled, value))
			{
				UpdateExistingGroupDescriptor(nameof(IsNodeIdGroupSwitchToggled), _isNodeIdGroupSwitchToggled);
			}
		}
	}

	private ObservableCollection<GroupDescriptorBase> _groupDescriptors;
	public ObservableCollection<GroupDescriptorBase> GroupDescriptors
	{
		get { return _groupDescriptors; }
		set { SetProperty(ref _groupDescriptors, value); }

	}

	private void UpdateExistingGroupDescriptor(string propertyToUpdate, bool IsOn)
	{
		if (GroupDescriptors == null)
			return;

		if (IsOn)
		{
			if (GroupDescriptors.Count == 0)
			{
				GroupDescriptors.Add(new ListViewPropertyGroupDescriptor()
				{
					PropertyName = "NodeName",
				});
			}

		}
		else
		{
			if (GroupDescriptors.Count != 0)
			{
				GroupDescriptors.Clear();
			}
		}
	}

The GroupDescriptors collection gets updated as I expected, but the list view does not respond to the new GroupDescriptor when the switch is set to on. If I add the descriptor in the XAML directly it generates the first view, so I am pretty sure the xaml and bindings are set up correctly, it just does not seem to work when I add it on the property updated.

Here is the cobbled together XAML for the prototype...

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             xmlns:appmodels ="clr-namespace:MauiControlLayout;assembly=MauiControlLayout"
             x:Class="MauiControlLayout.MainPage">

	<ContentPage.Resources>
		<ResourceDictionary>
			<DataTemplate x:Key="ListViewItemTemplate">
				<telerik:ListViewTemplateCell>
					<telerik:ListViewTemplateCell.View>
						<Grid  Padding="28, 0, 0, 0" BackgroundColor="White">
							<VerticalStackLayout>
								<Label Text="{Binding ControllerModel.NodeId}"  TextColor="#6F6F70" FontSize="Small" VerticalOptions="Center" />
								<Label Text="{Binding ControllerModel.ControllerId}" TextColor="#6F6F70" FontSize="Small" VerticalOptions="Center" />
							</VerticalStackLayout>
						</Grid>
					</telerik:ListViewTemplateCell.View>
				</telerik:ListViewTemplateCell>
			</DataTemplate>

			<!-- >> listview-features-header-template-xaml -->
			<DataTemplate x:Key="ListViewGroupHeaderTemplate">
				<Grid BackgroundColor="#007A53">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="Auto" />
						<ColumnDefinition />
					</Grid.ColumnDefinitions>
					<Label Text="&#x25B8;" Margin="8, 12, 0, 6" TextColor="DarkGray" FontSize="Medium">
						<Label.Triggers>
							<DataTrigger TargetType="Label" Binding="{Binding IsExpanded}" Value="True">
								<Setter Property="Text" Value="&#x25BE;" />
							</DataTrigger>
						</Label.Triggers>
					</Label>
					<Label Margin="0, 12, 0, 6" Text="{Binding Key}" Grid.Column="1" TextColor="DarkGray" FontSize="Medium" HorizontalOptions="Start" />
				</Grid>
			</DataTemplate>
			<!-- << listview-features-header-template-xaml -->
			<DataTemplate x:Key="HeaderTemplate">
				<StackLayout
				x:Name="GatewayPageHeader"
				Grid.Row="0"
				BackgroundColor="White"
				Padding="0, 0, 0, 3">
					<Grid>
						<Grid.RowDefinitions>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="Auto"/>
						</Grid.RowDefinitions>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="Auto"/>
							<ColumnDefinition Width="9*"/>
							<ColumnDefinition Width="1*"/>
						</Grid.ColumnDefinitions>
						<!-- Register Gateway Command -->
						<Label Grid.Column="0" Grid.Row="0" HorizontalOptions="Start" VerticalOptions="Center" Padding="2" FontSize="15" FontAttributes="Bold" Text="Available Gateways" TextColor="#007A53"/>
						<HorizontalStackLayout
							Grid.Column="0"
							Grid.ColumnSpan="3"
							Grid.Row="1"
							HorizontalOptions="StartAndExpand">
							<Label 
								x:Name="GroupByNodeIdEnabled"
								VerticalOptions="Center"
								VerticalTextAlignment="Center"
								Text="Group By Gateway"
								TextColor="#007A53" />
							<Switch x:Name="GroupByNodeIdSwitch"  Grid.Column="1" IsToggled="{Binding IsNodeIdGroupSwitchToggled}" Margin="5,0,0,0" />
						</HorizontalStackLayout>

						<!-- Settings Command -->
						<Image Grid.Row="0" Grid.Column="2" Source="plus_small_green.png" Aspect="AspectFill" WidthRequest="15" HeightRequest="15" Margin="0"/>
						<Frame Grid.Row="0" Grid.Column="2" WidthRequest="25" HeightRequest="25" BackgroundColor="Transparent" BorderColor="Transparent">
							<Frame.GestureRecognizers>
								<TapGestureRecognizer Command="{Binding AddGatewayCommand}"/>
							</Frame.GestureRecognizers>
						</Frame>
					</Grid>
				</StackLayout>
			</DataTemplate>
			<!-- << listview-features-header-template-xaml -->

		</ResourceDictionary>
	</ContentPage.Resources>
	
	
    <ScrollView
			x:Name="mainScrollView"
      BackgroundColor="#007A53">
		<Grid x:Name="mainGrid">
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto" />
				<RowDefinition Height="Auto" />
				<RowDefinition Height="*" />
			</Grid.RowDefinitions>

			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="10*" />
			</Grid.ColumnDefinitions>

			<telerik:RadListView
        x:Name="GatewayListView"  
				Grid.Row="1"
        Grid.ColumnSpan="2"
        ItemsSource="{Binding Controllers}"
        SelectedItem="{Binding SelectedController, Mode=TwoWay}"
				ItemTemplate="{StaticResource ListViewItemTemplate}"
				GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}"
				HeaderTemplate="{StaticResource HeaderTemplate}" 
        IsItemSwipeEnabled="True"
        SwipeOffset="70, 0, 70, 0"
        SwipeThreshold="10"
        BackgroundColor="Transparent"
        Margin="2">
				<!--<telerik:RadListView.GroupDescriptors>
					<telerik:ListViewPropertyGroupDescriptor PropertyName="NodeName"/>
				</telerik:RadListView.GroupDescriptors>-->

			</telerik:RadListView>


		</Grid>
	</ScrollView>


</ContentPage>

Can I use FilterDescriptors with OR options?
Can you help me?

                this.FilterDescriptors.Add(new Telerik.Maui.Controls.Compatibility.DataControls.ListView.ListViewDelegateFilterDescriptor()
                {
                    Filter = new Func<object, bool>(
                        (item) => ((ListaTechnical)item).TagLogic.Contains(searchText) || 
                                  ((ListaTechnical)item).Equipment.Contains(searchText) ||
                                  ((ListaTechnical)item).Conjunto.Contains(searchText) ||
                                  ((ListaTechnical)item).Issues.Contains(searchText) ||
                                  )
                });

Regards,

Rodrigo.

Hi!

How do I select an item in the listview at runtime (mvvm) and make this item always visible on the screen? Can you help me?

Example:
I press a button to select any item from the list. If this item is not appearing on the screen, listview automatically positions it on the item, making it visible.

Regards,

Rodrigo

What is the proper layout type to use when doing a searchbar?

In IOS, with a page that contains several controls, you would want the listview to appear only when you are typing into the searchbar.

I experimented with Grids, StackLayouts, etc.  Whatever space gets allocated in the layout for the listview is never collapsed when done searching & you hide the listview.   Work fine in Windows and Android.

What is the proper way to do this?

One of many unsuccessful attempts:

I couldn't figure out how to clean up ListView items after changing the item-source or leaving a page.

Let's take your TemplateCell Example from

https://docs.telerik.com/devtools/maui/controls/listview/cells/template-cell

If i use a custom view instead of the grid it doesn't get a unloaded event or disposed or something else.
This prevents me to do a native view cleanup in my custom view.  Consequently i can't disconnect Handlers resulting in memory leaks.

Am I missing something here? Something in the documentation?
Is there an example?

Hi Telerik Team,

May I kindly ask you if I could use ListView control in .NET MAUI with already grouped structure data type? I guess I could flatten my object source model, but I am interested if it is possible to use below model with ListView control and grouping options?

I have a ViewModel with a property type of ObservableCollection<T> MyProperty where T defined as:
public class T : List<T1>
{
public string Name {get;set;}
public string Area {get;set;}
}
and T1 as below:
public class T1
{
public string Id {get;set;}
public string ImgURL {get;set;}
//..some other properties
}

    I attempted to add a dropdown in RadListView. However, when running on an iOS device, clicking the dropdown interferes with the pull-to-refresh functionality, whereas it works fine on Android.

RadListView

custom dropdown popup in RadListView

custom drop-down popup

Hi,

Since migrating to MAUI .NET8 GA 8.0.3 (and Telerik 6.5) - on iOS the RadListView keeps repeatedly triggering the defined LoadOnDemand command to get more items even though list has not been scrolled by user (and there are still plenty of items off screen / bottom of list has not been reached).

I also refer to this previous post which describes how we are using the RadListView  - Grouped mode and based on advice using <Grid RowDefinitions="Auto" ...> wrapped around items to ensure items with multiple heights are rendered correctly : 
https://www.telerik.com/forums/telerik-radlistview-failing-to-render-grouped-list-items-correctly-on-ios-maui-net7

For example we have RadListView where 10 items are loaded initially - and then we load additional sets of 10 items each time from API when the LoadOnDemand command is triggered : 

- On iOS .NET8 MAUI - even when list is not even scrolled by user it & there are still plenty of items off screen it just keeps triggering the LoadOnDemand command every few seconds to ask for more items.

- On Android .NET8 MAUI, and the previous .NET7 MAUI releases (both Android/iOS) - we were not seeing this behaviour.

Note that (as per recommended implementation in docs) we have LoadOnDemandMode set to 'Automatic', IsLoadOnDemandEnabled to 'True' and a ListViewUserCommand of id = 'LoadOnDemand' defined under the Commands property.

Can please advise when a fix can be provided for this.

thanks

Niall

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