Saturday, September 8, 2018

Dealing Large amount of Data by Paging with Xamarin.Forms the easy way

Overview


Paging is one of things you will need to implement especially when you are dealing with large amount of data from your server, this scenario applies to both web applications, winforms and mobile. Today we will implement and On-Demand where we load the data dynamically from the server by page.

Preview






Implementation


We could have done this hard when doing it from scratch, but by implementing paging using Matcha Sync Mobile NuGet we are able to implement it with ease. To my amazement i was able to do it with just minimal amount of code (No functions were added on my api).


The secret lies behind OData Service we are now able to query in Rest Service. And by using Matcha Sync Api NuGet we are makin'  it even more easier.


This is implementation you would see in your mobile's paging.

//get the client instance
var client = MobileServiceClient.Instance;

//get the synctable
var todoTable = client.GetSyncTable<TodoItem>();


var query = _crudTodotTable.CreateQuery()
                                .Skip(((Page - 1) * RecordPerPage))
                                .Take(RecordPerPage);

await _crudTodotTable.PullAsync("getinfoquery", query);
var data = _crudTodotTable.ToList("getinfoquery");
var recordNumber = _crudTodotTable.RecordCount("getinfoquery");

NumberPages = (int) Math.Ceiling(recordNumber / RecordPerPage);


Just like the IQueryable the method Skip and Take is the key in implementing paging, But this time this is On-Demand (api get called when on next or previous page). After creating the query it will then call PullAsync method (which will call OData service).

You will now able to get the record count (RecordCount method) base on the query, in which you can get the Number of pages by this Formula


"NumberPages = (int) Math.Ceiling(recordNumber / RecordPerPage)".

That's It!



Sample Project


Browse to sample project HERE


Documentation


Get started by reading through the Matcha Sync Documentation



Wrapping Up



Feel free to tweak this project to suit your need. If you have some questions go shoot me a message here and will gladly answer your questions. If you want more and advance topic you can catch us at this facebook groups MondPH And Xamdavao. If you want the full sample source you can check it right here LINK. enjoy coding.


No comments:

Post a Comment