ListView plus DataPager plus Maui Community Toolkit

[Sebastian]

Hi! I'm trying to add an sfDataPager to a sfListView, Also I'm working with Maui Community toolkit.

I'dont want to use the Behavior, so the Community toolkit is for binding a command to the OnDemandLoading event. 

When the first page is showed and a try to go to the next page, the dataPager doesn't call the command associated to de event

Could you help me please? thanks!

Here's the code

-----------------

-----The View

-----------------

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:local="clr-namespace:CGI_ConveniosApp.Domain"
             x:Class="CGI_ConveniosApp.Features.SocioGetTodosAlfa.SocioGetTodosAlfaView"
             xmlns:listview="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
             xmlns:DataPager="clr-namespace:Syncfusion.Maui.DataGrid.DataPager;assembly=Syncfusion.Maui.DataGrid"
             xmlns:system="clr-namespace:System;assembly=mscorlib"
             
             Title="Búsqueda por nombre">


    <ScrollView>
        <FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="Center"
            VerticalOptions="Start" >
          
            <SearchBar
                x:Name="alfaSearch"
                Placeholder="Nombre/Apellido"
                PlaceholderColor="Gray"
                WidthRequest="300"
                Margin="0,10,0,20" 
                FontFamily="Roboto"
                FontSize="20"
                SearchCommand="{Binding BuscarAlfaCommand}"
                SearchCommandParameter="{Binding Source={x:Reference alfaSearch},Path=Text}"/>

            <listview:SfListView 
                x:Name="listView" 
                Grid.Row="0" 
                ItemsSource="{Binding Source={x:Reference dataPager}, Path=Source}"
                
                AutoFitMode="Height" 
                ItemSize="200" 
                SelectionGesture="Tap">
                <listview:SfListView.ItemTemplate>
                    <DataTemplate>
                        <Grid RowSpacing="0" Padding="8,12,8,0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="1" />
                            </Grid.RowDefinitions>
                            <Grid RowSpacing="0" Padding="0,0,8,10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid Grid.Row="0" Grid.Column="1" RowDefinitions="Auto,Auto,Auto" 
                      RowSpacing="5">
                                    <Label Text="{Binding Nombre}" FontAttributes="Bold" 
                        FontSize="16" TextColor="#474747"/>
                                    <Label Text="{Binding Banco}" Grid.Row="1" FontSize="14" 
                       Opacity="0.67" TextColor="#474747" />

                                </Grid>
                            </Grid>
                            <BoxView Grid.Row="1" Margin="5,0,0,0" HeightRequest="1" 
                    Opacity="0.75" BackgroundColor="#CECECE" />
                        </Grid>
                    </DataTemplate>
                </listview:SfListView.ItemTemplate>
            </listview:SfListView>

            <DataPager:SfDataPager 
                x:Name="dataPager"
                Grid.Row="1"
                Margin="7.5,11.5,7.5,11.5"
                HorizontalOptions="Fill"
                VerticalOptions="Center"
                HeightRequest="36"
                ButtonSize="36"
                ButtonSpacing="8"
                ButtonFontSize="14"
                UseOnDemandPaging="True"
                Source="{Binding ResultadoBusqueda}"
                >
                
                <DataPager:SfDataPager.Behaviors>
                <toolkit:EventToCommandBehavior
                        EventName="OnDemandLoading"
                        Command="{Binding PageChangedCommand}"
                    />
                </DataPager:SfDataPager.Behaviors>
            </DataPager:SfDataPager>
        </FlexLayout>
    </ScrollView>
</ContentPage>

-----------------

-----Code  Behind

-----------------

public partial class SocioGetTodosAlfaView : ContentPage
{
	public SocioGetTodosAlfaView(SocioGetTodosAlfaViewModel viewModel)
	{
		InitializeComponent();
		BindingContext = viewModel;
    }

}

-----------------

-----The view model

-----------------

 [AddINotifyPropertyChangedInterface]
 public class SocioGetTodosAlfaViewModel
 {

     private SfDataPager? dataPager=new SfDataPager();

     private readonly IAPIServicios _apiservicios;
     public List<Socio> listSocio;
     public List<Socio> ResultadoBusqueda { get; set; } = new List<Socio>();
     public ICommand BuscarAlfaCommand { get; }
     public ICommand PageChangedCommand { get; set; }

     public SocioGetTodosAlfaViewModel(IAPIServicios aPIServicios)
     {
            
         _apiservicios = aPIServicios;


         // Comando de Búsqueda
            
         BuscarAlfaCommand = new Command<string>(async (textoBusqueda) =>
         {
             if (string.IsNullOrWhiteSpace(textoBusqueda)) return;
             var resultado = await _apiservicios.GetSocioBusqAlfa(textoBusqueda, 1, 5);
             dataPager.PageCount= (int)Math.Ceiling((double)resultado.TotalCount / 5);
             try
             {
                 ResultadoBusqueda = resultado.DatosSocio;
             }
             catch (Exception ex)
             {
                 await Application.Current.MainPage.DisplayAlert("Error", $"Ocurrió un error al realizar la búsqueda: {ex.Message}", "OK");
                 return;
             }
         });

         PageChangedCommand = new Command<Syncfusion.Maui.DataGrid.DataPager.OnDemandLoadingEventArgs>(async(e) =>
         {
             try
             {
                 var resultado = await _apiservicios.GetSocioBusqAlfa("Juan", e.StartIndex, 5);

                 Console.WriteLine("Page changed to: " + e.StartIndex);

             }
             catch (Exception ex)
             {
                 // manejar errores si se requiere
                 Console.WriteLine("Error",ex.Message);
             }
         });
     }
 }

-------------

-- the response type

---

public class SocioResultadoConPaginacion
{
    public int CurrentPage { get; set; }
    public int TotalPages { get; set; }
    public int PageSize { get; set; }
    public int TotalCount { get; set; }
    public List<Socio> DatosSocio { get; set; }
}

[Mohan Raj Murugan]

Hi Sebastian,

We have reviewed the reported issue on our end. In On-Demand paging, you should not assign a value to the Source property. You must also specify an integer value for the PageCount property to ensure that the appropriate numeric navigation buttons are rendered in the view.

For more details, please refer to the following user guide documentation:
Paging in MAUI DataGrid control | Syncfusion®

 

Regarding the .NET MAUI Community Toolkit, based on the latest updates, you will need to manually set the BindingContext and use an EventArgsConverter to pass event arguments to the command. You can find more information here:

EventToCommandBehavior - .NET MAUI Community Toolkit - Community Toolkits for .NET | Microsoft Learn

 

We have also included a sample demonstrating this implementation for your reference.

 

Please let us know if you need any further assistance. We are happy to help.

Regards,
Mohan raj M.

Attachment: MauiListView_3397826.zip