server-side Pagination, pager on client side shows only the first page

Question

dear support, i am trying to implement Database-side pagination with service classes.

the client shows only the first page and 50 records. it does not allow to go to other pages.

here is the console output. can you please help ?

***

nfo: Microsoft.EntityFrameworkCore.Database.Command[20101]

Executed DbCommand (2,422ms) [Parameters=[], CommandType='Text', CommandTimeout='30']

SELECT COUNT(*)

FROM [Contacts] AS [c]

info: Microsoft.EntityFrameworkCore.Database.Command[20101]

Executed DbCommand (22ms) [Parameters=[@__p_0='?' (DbType = Int32), @__p_1='?' (DbType = Int32)], CommandType='Text', CommandTimeout='30']

SELECT [c].[Id], [c].[Arc], [c].[Comment], [c].[ContactPersonInOrganization], [c].[ContactType], [c].[CreatedAt], [c].[DateOfBirth], [c].[Email], [c].[FirstName], [c].[GdprConsent], [c].[Gender], [c].[Jurisdiction], [c].[LastName], [c].[NationalId], [c].[OrganizationFormationDate], [c].[OrganizationName], [c].[OrganizationRegistrationNumber], [c].[OrganizationType], [c].[OurReference], [c].[Passport], [c].[PhoneHome], [c].[PhoneMobile], [c].[PhoneOther], [c].[PhoneWork], [c].[RowVersion], [c].[Status], [c].[TaxIdentificationCode], [c].[UpdatedAt], [c].[Vat]

FROM [Contacts] AS [c]

ORDER BY [c].[Id]

OFFSET @__p_0 ROWS FETCH NEXT @__p_1 ROWS ONLY

LoadData: Retrieved 50 contacts

LoadData: totalRecords=4320620

LoadData: PageCount=86413

LoadData: Grid refreshed******

*****************

@page "/contactspage3"

@inject ToastService ToastService

@inject IContactService ContactService

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Grids

@using Microsoft.EntityFrameworkCore

<PageTitle>Contacts</PageTitle>

</GridCommandColumns>

</GridColumn>

</GridColumns>

</SfGrid>

@code {

private SfGrid<Contact>? gridContacts;

private List<Contact> Contacts { get; set; } = new List<Contact>();

private GridPageSettings PageSettings { get; set; } = new GridPageSettings { PageSize = 50 };

private const int PageSize = 50;

private int totalRecords=5;

protected override async Task OnInitializedAsync()

{

await LoadData(0, PageSize);

}

private async Task OnActionBegin(ActionEventArgs<Contact> args)

{

if (args.RequestType == Syncfusion.Blazor.Grids.Action.Paging)

{

var currentPage = args.CurrentPage;

var pageSize = PageSize;

var skip = (currentPage - 1) * pageSize;

Console.WriteLine($"OnActionBegin: currentPage={currentPage}, pageSize={pageSize}, skip={skip}");

await LoadData(skip, pageSize);

}

private async Task LoadData(int skip, int take)

{

Console.WriteLine($"LoadData: skip={skip}, take={take}");

var result = await ContactService.GetContactsAsyncv2(skip, take);

Console.WriteLine($"LoadData: Retrieved {result.Contacts.Count} contacts");

Contacts = result.Contacts.ToList(); // Ensure complete list replacement

totalRecords = result.TotalCount;

Console.WriteLine($"LoadData: totalRecords={totalRecords}");

// Calculate PageCount based on total records and PageSize

PageSettings.PageCount = (int)Math.Ceiling((double)totalRecords / PageSize);

Console.WriteLine($"LoadData: PageCount={PageSettings.PageCount}");

// Force a grid re-render for debugging purposes

await Task.Delay(100); // Adjust delay as needed

await gridContacts.Refresh();

Console.WriteLine($"LoadData: Grid refreshed");

StateHasChanged();

}

=====

public interface IContactService

{

Task<(List<Contact> Contacts, int TotalCount)> GetContactsAsyncv2(int skip,int take);

Task<List<Contact>> GetContactsAsync(QuerySpecification<Contact> spec);

Task<(List<Contact> Contacts, int TotalCount)> GetContactsAsync2(QuerySpecification<Contact> spec);

Task<Contact?> GetContactByIdAsync(int id);

Task<Contact> CreateContactAsync(Contact contact);

Task<Contact> UpdateContactAsync(Contact contact);

Task DeleteContactAsync(int id);

}

public class ContactService : IContactService

{

private readonly ApplicationDbContext _context;

private readonly MyQueryBuilder _myqueryBuilder;

public ContactService(ApplicationDbContext context, ILogger<MyQueryBuilder> logger)

{

_context = context;

_myqueryBuilder = new MyQueryBuilder(logger);

}

public async Task<(List<Contact> Contacts, int TotalCount)> GetContactsAsyncv2(int skip, int take)

{

var totalCount = await _context.Contacts.CountAsync();

var contacts = await _context.Contacts

.OrderBy(c => c.Id)

.Skip(skip)

.Take(take)

.ToListAsync(); // Using ToListAsync() to return List<Contact>

return (contacts, totalCount);

}

Monisha Saravanan · Answer

Hi Daniel,Greetings from Syncfusion.Query: “dear support, i am trying to implement Database-side pagination with service classes. the client shows only the first page and 50 records. it does not allow to go to other pages. here is the console output. can you please help ?”We suspect that you are encountering issues with pagination on your end. After reviewing your shared code, we observed that only the current page data is being fetched. As a result, the pager element only displays the current page.To render the pager correctly and allow navigation through all pages, we need to provide the total count of records to the DataGrid. This enables the pager to calculate and display all available pages.In the example below, we utilized the custom adaptor feature of the DataGrid. With this approach, the DataGrid handles the skip and take requests internally, eliminating the need for external events (OnActionBegin) to manage pagination.Kindly check the below attached sample and code snippet for your reference. @inject IJSRuntime Runtime @inject HttpClient Http @if(@IsVisible) { } @code{ SfGrid? Grid { get; set; } public static List result = new List(); public bool IsVisible { get; set; } = false; protected override async void OnInitialized() { var apiUrl = "https://localhost:7157/api/DataGrid"; result = await Http.GetFromJsonAsync>(apiUrl); //result = result.Take(50).ToList(); //if this line is ebabled then it will render only one page in DataGrid IsVisible = true; StateHasChanged(); } // Implementing custom adaptor by extending the DataAdaptor class public class CustomAdaptor : DataAdaptor { // Performs data Read operation public override object Read(DataManagerRequest dm, string key = null) { IEnumerable DataSource = result; int count = DataSource.Cast().Count(); // need to pass the entire DataSource count if (dm.Skip != 0) { //Paging DataSource = DataOperations.PerformSkip(DataSource, dm.Skip); } if (dm.Take != 0) { DataSource = DataOperations.PerformTake(DataSource, dm.Take); } return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource; } } } Kindly get back to us if we misunderstood your query or if you have further queries.Regards,MonishaAttachment: WASM_90ecbb37.zip

DAN · Answer

hi, if you inspect the console out****LoadData: Retrieved 50 contactsLoadData: totalRecords=4320620LoadData: PageCount=86413LoadData: Grid refreshed******total records number is returned public async Task<(List Contacts, int TotalCount)> GetContactsAsyncv2(int skip, int take) { return (contacts, totalCount);}So why the grid is not showing the rest of the pages that must be fetched on demand?we dont want to use an api but service classed. can you show us a very simple working example in order to achieve the requirements (Database-side pagination,filtering) to load data "on damand when changing page,

Prathap Senthil · Answer

Hi
Daniel,Based on the
reported problem, we would like to clarify that the TotalItemsCount property is
not binding directly to the DataGrid, which is why you faced the issue with
your previous approach using the DataSource property. Instead of
using the DataSource property, we suggest using the CustomAdaptor feature to
achieve your requirements. We have already documented a similar SQL
 server data binding with the CustomAdaptor feature.please refer to the
documentation below. 
Reference: https://blazor.syncfusion.com/documentation/datagrid/data-binding#sql-server-data-bindingsql-clientPreviously,
you used the actionBegin handler. Instead, with the CustomAdaptor, the
ReadAsync method should return the current page records and the total record
count. This way, the grid will render paging correctly, and the records for the
next page will be displayed using this approach. This is the default behavior.
Thanks for your understanding.

Regards,
Prathap Senthil

DAN · Answer

i am trying to implement it but it does not work. i am getting not data.here is my code for beneficiaries page, and custom adapter and service:====razor page====@page "/beneficiaries"@using Syncfusion.Blazor.Grids@using Syncfusion.Blazor.Data@using Rad.Models@using Rad.Services@inject BeneficiaryDataAdaptor BeneficiaryDataAdaptor

Beneficiary Management

@BeneficiaryDataAdaptor @* *@ @code {}=======//Services> BeneficiaryDataAdaptor.csusing Syncfusion.Blazor.Data;using Rad.Services;using Rad.Models;using Microsoft.Extensions.Logging;using Syncfusion.Blazor;public class BeneficiaryDataAdaptor : DataAdaptor{ private readonly IBeneficiaryService _beneficiaryService; private readonly ILogger _logger; public BeneficiaryDataAdaptor(IBeneficiaryService beneficiaryService, ILogger logger) { _beneficiaryService = beneficiaryService; _logger = logger; } public override async Task

Prathap Senthil · Answer

Based on the reported issue, it appears that the SfDataManager's AdaptorInstance has been incorrectly defined in your code, leading to the problem you're experiencing. We recommend defining the AdaptorInstance correctly. Please refer to the code snippet and sample provided below for guidance. If the issue persists, please share a reproducible sample with duplicate data or try to reproduce the reported issue using the attached sample.

<SfDataManager AdaptorInstance="@typeof(BeneficiaryDataAdaptor)" Adaptor="Adaptors.CustomAdaptor">

</SfDataManager>

//This code is not defined correctly.

<SfDataManager Adaptor="Adaptors.CustomAdaptor">

<SfDataManager.AdaptorInstance>

@BeneficiaryDataAdaptor

</SfDataManager.AdaptorInstance>

</SfDataManager>

Note: After connecting the database, we need to copy the path of the database and change the connection string with the copied path in appsettings.json file based on the NORTHWND.MDF file

Additionally, if you are looking for a custom adapter as a component, we have already documented this topic. Kindly refer to the documentation below for your reference.
https://blazor.syncfusion.com/documentation/datagrid/custom-binding#custom-adaptor-as-component

Attachment: BlazorDataGridSQLNet8_e0e3a916.zip