Hello Ravi,

Thank you for posting in our community!

I have been looking into your question and I believe that you will find our Remote Paging section here quite helpful as it provides information on how remote paging could be handled automatically when using Ignite UI for MVC.

Additionally, the number of records that are loaded and displayed when clicking the Next/Prev buttons are determined by the pageSize option of the igGridPaging feature and in order to specify that 10 records should be fetched, the igGridPaging configuration should be similar to the following:

.Features(features =>
{
    features.Paging().Type(OpType.Remote).PageSize(10);
})

Attached could be found a small sample, i.e., remotePaging MVC Helpers automatic.zip, demonstrating this approach.

Furthermore, in case you are implementing your own remote service, I would suggest referring to our Handling Remote Paging section here as it provides detailed information along with code snippets demonstrating how the paging feature could be configured to retrieve a specified chunk of data and properly initialize and render the pager.

Attached could be found a sample, i.e., remotePaging MVC Helpers custom handler.zip, demonstrating this approach as well.

Please test them on your side and let me know if you need any further assistance regarding this matter.

Additionally, if this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce it.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Associate Software Developer

8510.remotePaging MVC Helpers automatic.zip

2234.remotePaging MVC Helpers custom handler.zip

public JsonResult GetDataPaging(int page, int pageSize)
{
    // **** Custom logic here ****
    IEnumerable<Customer> customers = GetCustomers();
    IQueryable data = customers.AsQueryable();
    int totalCount = data.Count();
    data = data.Skip(page * pageSize).Take(pageSize);
    // *******************************
    
    JsonResult result = new JsonResult(new { }, new JsonSerializerOptions { PropertyNamingPolicy = null });

    // setting the JsonResult Value like the following disables the Next button
    // and does not determine the number of pages correctly
    result.Value = new { Records = data };

    // **** this configuration should be as follows ****
    result.Value = new { Records = data, TotalRecordsCount = totalCount };

    return result;
}

The TotalRecordsCount value corresponds to the recordCountKey property which holds the total number of records in the data source and should be provided in order to determine and tell the Paging widget how many records in total are in the backend.

.Features(features =>
{
    features.Paging().Type(OpType.Remote).PageSize(20).RecordCountKey("TotalRecordsCount");
})

Additionally, in case you continue to experience this behavior after setting the required properties as expected, i.e., recordCountKey and responseDataKey, it would be highly appreciated if you could provide me with a small sample that demonstrates the behavior on your side.

Having a sample that I can debug on my side will be extremely helpful in finding the root cause of this behavior and providing you with a solution as soon as possible.

Thank you for your cooperation. Looking forward to your reply.

Sincerely,
Riva Ivanova
Associate Software Developer

Additionally, as mentioned in our Remote Paging section here, if you are implementing your own remote service, i.e., implementing custom paging functionality, in order to properly initialize and render the pager, your service should specify both the responseDataKey (grid option) and the recordCountKey (paging option) where the recordCountKey member tells the Paging widget how many records in total are in the backend and the responseDataKey specifies which property in the response contains the resulting data.

Furthermore, the attached remotePaging MVC Helpers custom handler.zip project from my previous message demonstrates this approach where the custom GetDataPaging method is responsible for returning the resulting data. This is a simplified implementation and could be customized in order to fulfill your requirements.

public JsonResult GetDataPaging(int page, int pageSize)
{
    // **** Custom logic here ****
    IEnumerable<Customer> customers = GetCustomers();
    IQueryable data = customers.AsQueryable();
    int totalCount = data.Count();
    data = data.Skip(page * pageSize).Take(pageSize);
    // ******************************

    JsonResult result = new JsonResult(new { }, new JsonSerializerOptions { PropertyNamingPolicy = null });
    result.Value = new { Records = data, TotalRecordsCount = totalCount };
    return result;
}

Please test it on your side and let me know if you need any further assistance regarding this matter.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Associate Software Developer