Maui-collection view load data in portion

Question

Maui-collection view load data in portion

Dani_S 4,501

Hi,I'm in net 8 and not want to load all data in once but in portions. When user scroll it will bring next data. How is can be done ?Thanks,

Accepted answer

0 additional answers

Your answer

Answer 1

Michael Taylor 60,161

Perhaps the documentation provided here can be of help. It talks about how to implement the behavior you want where data is loaded on demand as the user scrolls.

Dani_S 4,501 Reputation points

2024-01-29T19:39:48.8633333+00:00

I read the documnatations, the command way is the prefer way I'm using mvvm. But how I load data in portions? Can you please supply sample code. I want to use this approach in my report view. User chose dates from to and later click on search command and data come in portions when scrolling.
Michael Taylor 60,161 Reputation points

2024-01-29T20:00:00.92+00:00

Please provide us the relevant CollectionView code you already have that is loading your data (without being on demand) so we can provide direction as to how to make it on demand instead.

Michael Taylor 60,161

Here's the simplest example I can come up with without knowing anything about your code base.

public partial class MainPage : ContentPage
{        
    public MainPage ()
    {
        InitializeComponent();

        BindingContext = new MyTimeCollectionViewModel();
    }
}

public class MyTimeCollectionViewModel
{
    public MyTimeCollectionViewModel()
    {
        //Initial data
        LoadMore();
    }

    public ObservableCollection<TimeData> Times { get; } = new ObservableCollection<TimeData>();

    public ICommand LoadMoreCommand => new Command(LoadMore);
    
    private void LoadMore ()
    {
        var latest = Times.Any() ? Times.Last().Date : DateOnly.FromDateTime(DateTime.Today);

        //Load data into collection so UI shows it
        for (var index = 1; index < 20; ++index)            
            Times.Add(new TimeData(latest.AddDays(index)));
    }
}    

public class TimeData
{
    public TimeData ( DateOnly value )
    {
        Date = value;
    }

    public DateOnly Date { get; }

    public override string ToString () => Date.ToString();
}

<Grid Margin="20">
    <CollectionView ItemsUpdatingScrollMode="KeepScrollOffset" ItemsSource="{Binding Times}" RemainingItemsThreshold="5" RemainingItemsThresholdReachedCommand="{Binding LoadMoreCommand}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding Date}"></Label>
            </DataTemplate>
        </CollectionView.ItemTemplate>            
    </CollectionView>
</Grid>

Dani_S 4,501

Hi, When page load i do not have any data. My query pareameters are from/to date pickers and loading are below. How to use your sample to load data in portions (Load more).

 /// <summary>
 /// Get all files from logs collections accorsing to filters
 /// </summary>
 /// </summary>
 /// <param name="from">The from date filter</param>
 /// <param name="to">The to date filter</param>
 /// <returns>Returns all files from logs collections according to filters</returns>
 public static IList<BsonDocument> GetAllLogsFilesForLocalHistoryByFilteres(DateTime from, DateTime to)
 {
    
     
     var timeStampFilter1 = Builders<BsonDocument>.Filter.Gte("TimeStamp", from);
     var timeStampFilter2 = Builders<BsonDocument>.Filter.Lte("TimeStamp", to);
     var sort = Builders<BsonDocument>.Sort.Descending("TimeStamp");
     var logCollection = GetInstance().GetCollection(ConstantsHelper.LogsCollection);
     return logCollection.Find(Builders<BsonDocument>.Filter.And(timeStampFilter1, timeStampFilter2)).Sort(sort).ToList();
 }

 logsFiles = MongoDbHelper.GetAllLogsFilesForLocalHistoryByFilteres( Convert.ToDateTime(FromDate.Value.ToString("r", CultureInfo.InvariantCulture)).ToUniversalTime(), Convert.ToDateTime(ToDate.Value.ToString("r", CultureInfo.InvariantCulture)).ToUniversalTime());
 var counter = 0;
     foreach (var logFile in logsFiles)
     {
         string succeded = AesHelper.Decrypt(logFile.GetValue("Result").AsString);
         string type = AesHelper.Decrypt(logFile.GetValue("PullOrPush").AsString);
         .......

    
     HistoryReport historyReport = new HistoryReport()
         {
             Succeded = succeded,
             Type = type,
             .........
         };

      HistoryReportSource.Add(historyReport);
 }

Michael Taylor 60,161 Reputation points

2024-01-30T14:59:55.19+00:00

I don't see any place in your code you're hooking the data up to the UI but in order to load the initial data you have to do the same thing as you would if you weren't loading on demand, you have to initialize the view model. So whatever view model you're binding to the collectionview needs to load the initial set of data when it is loaded. I did it in the constructor of the view model because this was a sample. In your case you are more likely to do that by having the parent window that creates the view model first load the initial set of data and then pass it to the view model's constructor. After that the view model's command loads the data on demand.
Dani_S 4,501 Reputation points

2024-01-30T18:27:00.3533333+00:00

I have no data when page load. After end user choose range of dates (from-> to) i used GetAllLogsFilesForLocalHistoryByFilteres function in serach command. HistoryReportSource is bound to item source of collection view. so how to load in portions ? Does loading in portions maens that filtering/grouping/sorting will be only on load on demand data ?
Michael Taylor 60,161 Reputation points

2024-01-30T19:20:11.5466667+00:00

Your search command needs to add the data it loads (when the user chooses the range) to the ObservableCollection that you are binding your collectionview to. When the collection is changed then the UI will automatically update to display it. After that the updating as the user scrolls remains the same. So, in the example I loaded the initial set of data when the VM was created. In your case you'll load the data when the user chooses a range. Note that you need to create the VM instance as part of the UI creation (otherwise binding doesn't work). But the list of data inside that VM (the observable collection) will be empty until the user chooses a range.

Filtering/grouping/etc, I assume, should be done across all the data. Therefore you'll need to adjust your loading logic to do all this filtering/grouping/etc and then truncate the results to however many you want to show at one time. Each time you need to fetch the next set of data (in response to scrolling) you'll need to repeat this logic, throw away what you've already loaded and return the truncated results. It isn't trivial and doing this may offset the benefits of loading the data on demand. It depends on how optimal your query is for getting the filtered/grouped/etc data.
Dani_S 4,501 Reputation points

2024-01-30T22:02:35.77+00:00

Thanks a lot

Share via

Maui-collection view load data in portion

0 additional answers

Your answer