Hi,
I need custom paging for prev and next button. If I click next button it should goto api and fetch next 10 records. Anything available?
Thanks
Ravi
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
Can I override the prev and next button functionality?
Thank you for following up!
After looking into your second question, I need to ask for some additional information. Could you please clarify how the Prev/Next buttons functionality should be overridden? Do you have remote paging enabled and what kind of custom functionality do you require?
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.
Hello,
Thank you for your follow-up message!
Could you please confirm that everything works as expected now on your side?
Additionally, as I am not sure how the igGrid is configured on your side, in an effort to reproduce the described behavior, I have modified the previously attached remotePaging MVC Helpers custom handler.zip sample and I was able to reproduce it when setting the JsonResult value and not providing the TotalRecordsCount property.
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.
I think I got it now.
What I meant is, I have 2 Million records in the database. So on the initial page load, I want to show only 20 records. On the click of Next it should fetch another 20 records. But here the Next button is disabled. So this is my requirement.
Indra