Paging with DataTemplateSelector

[Michael]

Hello,

as SfDataPager is part of SfDataGrid I placed my question under this control, although I don't use the grid just the pager. Hope this is the right place.

Currently I have a CollectionView showing two different types of "Matches" distinguished by a DataTemplateSelector:

<CollectionView Grid.Row = "1" 
                ItemsSource="{Binding ArchivedMatches}"     
                Margin="8">

    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" ItemSpacing="8" />
    </CollectionView.ItemsLayout>

    <CollectionView.ItemTemplate>
        <selectors:MatchTemplateSelector
            StraightPoolTemplate="{StaticResource StraightPoolTemplate}"
            XBallTemplate="{StaticResource XBallTemplate}" />
    </CollectionView.ItemTemplate>
</CollectionView>


public class MatchTemplateSelector : DataTemplateSelector
{
    public DataTemplate StraightPoolTemplate { get; set; } = null!;
    public DataTemplate XBallTemplate { get; set; } = null!;

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (item is not BaseViewMatch) throw new ArgumentException("Item must be of type BaseViewMatch", nameof(item));

        return item is StraightPoolViewMatch ? StraightPoolTemplate : XBallTemplate;
    }
}

This works fine, but I now want to add paging. Therefore I changed the code to:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height = "*" />
        <RowDefinition Height = "Auto" />
    </Grid.RowDefinitions>

    <Border Grid.Row = "1" Padding = "5">
        <syncPager:SfDataPager x:Name = "dataPager"
                       PageSize = "5" 
                       NumericButtonCount = "10"
                       Source = "{Binding ArchivedMatches}">
        </syncPager:SfDataPager>
    </Border>
        
    <CollectionView Grid.Row = "0" 
                    ItemsSource="{Binding Source={x:Reference dataPager}, Path=PagedSource}"     
                    Margin="8">
            
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Vertical" ItemSpacing="8" />
        </CollectionView.ItemsLayout>

        <CollectionView.ItemTemplate>
            <selectors:MatchTemplateSelector
            StraightPoolTemplate="{StaticResource StraightPoolTemplate}"
            XBallTemplate="{StaticResource XBallTemplate}" />
        </CollectionView.ItemTemplate>
    </CollectionView>
</Grid>



Now, the DataTemplateSelector doesn't work anymore, because the passed in object is of course no longer of type "BaseViewMatch". It is now of type Syncfusion.Maui.Data.RecordEntry and I can't see any possibility to get to the underlying object. The properties of RecordEntry, especially Data, is always null.

So my question is, how do I use the SfDataPager together with a DataTemplateSelector?

Thanks for your help!

Regards

Michael

[Michael]

I found a way around it by using OnDemand paging with a Behavior and doing the paging myself.

Regards, Michael 

<Grid RowDefinitions="Auto, *">
    <syncPager:SfDataPager Grid.Row="0" x:Name = "dataPager" 
                           HorizontalOptions="Center" 
                           PageSize = "20" 
                           ButtonSize="40" 
                           ButtonSpacing="8" 
                           ButtonFontSize="16" 
                           DisplayMode = "FirstLastNumeric" 
                           NumericButtonCount="9" 
                           AutoEllipsisMode="Both" 
                           UseOnDemandPaging="True">
    </syncPager:SfDataPager>

    <CollectionView Grid.Row="1" Margin="8">
            
        <CollectionView.Behaviors>
            <behavior:CollectionPagingBehavior 
                BindingContext="{Binding Source={x:Reference this}, Path=BindingContext}" 
                ItemsSource="{Binding ArchivedMatches}" 
                DataPager="{x:Reference dataPager}"/>
        </CollectionView.Behaviors>

        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Vertical" ItemSpacing="8" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <selectors:MatchTemplateSelector 
                StraightPoolTemplate="{StaticResource StraightPoolTemplate}" 
                XBallTemplate="{StaticResource XBallTemplate}" />
        </CollectionView.ItemTemplate>
    </CollectionView>
</Grid>

public partial class CollectionPagingBehavior : Behavior<CollectionView>
{
    private CollectionView? _view;

    [BindableProperty]
    public partial SfDataPager? DataPager { get; set; }

    [BindableProperty(PropertyChangedMethodName = nameof(OnItemsSourceChanged))]
    public partial IEnumerable<BaseViewMatch>? ItemsSource { get; set; }


    protected override void OnAttachedTo(CollectionView collectionView)
    {
        base.OnAttachedTo(collectionView);

        _view = collectionView;
        DataPager?.OnDemandLoading += DataPager_OnDemandLoading;
    }

    protected override void OnDetachingFrom(CollectionView collectionView)
    {
        base.OnDetachingFrom(collectionView);

        DataPager?.OnDemandLoading -= DataPager_OnDemandLoading;
        DataPager = null;

        _view = null;
        ItemsSource = null;
    }

    private static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is CollectionPagingBehavior { DataPager: not null, ItemsSource: not null } behavior)
        {
            behavior.DataPager.PageCount = (int)Math.Ceiling((double)behavior.ItemsSource.Count() / behavior.DataPager.PageSize);
        }
    }

    private void DataPager_OnDemandLoading(object? sender, OnDemandLoadingEventArgs e)
    {
        var source = ItemsSource!.Skip(e.StartIndex).Take(e.PageSize);
        _view!.ItemsSource = source;
    }
}

[Muthupandy Ramakrishnan]

Hi Michael,
Thank you for the update.

We are glad to hear that you were able to find a solution using On-Demand Paging with a custom behavior.

We have also investigated the issue on our end and were able to reproduce the same behavior. We noticed that the issue can be successfully worked around by using the On-Demand Paging approach, where the records for the current page are loaded manually into the CollectionView. This ensures that the DataTemplateSelector receives the original data objects and applies the appropriate template as expected.

To validate this, we prepared a simple sample using the same On-Demand Paging approach. Unlike your implementation, the attached sample uses a simplified setup without additional behaviors or helper classes to keep the implementation straightforward and easy to follow.

Please review the attached sample and let us know whether it is helpful for your scenario.

If you have any further questions or need any additional assistance, please feel free to reach out to us. We are always happy to help.

Best Regards,
Muthupandy R.

Attachment: SfDataGridSample_65e1152c.zip

[Michael]

Thanks for your effort. Your example is pretty similar to mine and also working good. 

Thanks

Michael

[Muthupandy Ramakrishnan]

Hi Michael,

Thank you for the confirmation. We are glad to hear that the sample works well for your scenario.

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

Best Regards,
Muthupandy R.