Problem using <SfPager>.

[Tom Dimos]

I have a Grid that I load ondemand some data (50 out of 90) but I want the pager to show that we have more than 50 records and I want to be able to use some event when the user wants to change the page so I can load the remaining ones. I don't know if I can achieve that using the DataGrid Paging feature so I discovered  <SfPager> which seems great. Although I don't know how to use it and I couldn't find any example.I am currently using it like this but I have two problems.

<SfGrid>...<SfGrid>

<SfPager @ref = "@pager" PageSize = "50">
  <PagerEvents Click  = "OnClick"></PagerEvents>
</SfPager>

My main problem is that I want to set the TotalRecordsCount in OnInitializedAsync() but I can't.

protected override async Task OnInitializedAsync(){
        Forms = await FormManager.getForms();
        ObservableForms = new ObservableCollection<Form>(Forms);
        pager.TotalRecordsCount = FormManager.FormCount;
        ResetList += HandleResetList;
        Console.WriteLine(pager.TotalRecordsCount);
}

The print shows the correct value but the pager shows 0 (maybe it doesn't rerender). And the other problem is that if I use the Click event(supposed that TotalRecordsCount is set to a value) and press the next page the UI doesn't change the page (the blue background color doesn't appear in the selected page).

[Jeevakanth Palaniappan]

Hi Tom, 

Greetings from Syncfusion support. 

We have validated your requirement and you can achieve it by using the default grid paging feature.  

Query 1 : I want the pager to show that we have more than 50 records 

 

By default the grid pager itself will show the number of records in the grid. Please refer the below screenshot and the documentation link for your reference. 

 

 

 

 

https://blazor.syncfusion.com/demos/datagrid/paging?theme=bootstrap4  

https://blazor.syncfusion.com/documentation/datagrid/paging/  

 

Query 2: I want to be able to use some event when the user wants to change the page  

 

You can achieve your requirement by using OnActionBegin event of the grid. On changing the page, the grid OnActionBegin event will be triggered with request type as Paging.  

 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfGrid1482644782  

Documentation -  https://blazor.syncfusion.com/documentation/datagrid/events/#onactionbegin  

 

Please get back to us if you need further assistance. 

 

Regards, 

Jeevakanth SP. 

[Tom Dimos]

I wasn't so clear with my first query.I make an API call and I receive 50 records out of a total number for example 90.I know the total number from the response that I get and I want the Pager to show this number (90).Currently the Pager shows the loaded records which is the records in the Grid. Then when the user presses the next page the remaining ones are loaded. A workaround I found but not an efficient one is to define the list capacity to this number but this lets the list with empty space and the user may not get the remaining ones.Also this number can be large. Using SfPager I can define the TotalRecordsCount but I have the issue mentioned in my first post.

[Vignesh Natarajan]

Hi Tom,  

 

Thanks for the detailed explanation.  

 

Query: “Using SfPager I can define the TotalRecordsCount but I have the issue mentioned in my first post.” 

 

We have analyzed your query and we understand that you want to handle the paging operation in Grid separately on your own. And also you are fetching data from your API service which return a set of data (current page) and total record count.  

 

We suggest you to achieve your requirement using Custom Adaptor feature of the Grid. Using CustomAdaptor, we can handle the Data and CRUD operation separately on our own. While performing certain actions in Grid like paging, filtering. Request will be made to Read / ReadAsync along with details regarding the operation. (i.e.) When paging is enabled in Grid navigating from one page to another will send the details regarding that particular action to CustomAdaptor, where we can perform our own actions.  

 

In CustomAdaptor’s Read / ReadAsync method datasource has to be returned in form of Result and Count. Where Result indicates the retrieved datasource and Count indicates total number of page records exist in service. Based on count value, Grid default pager will perform. So we suggest you to use Grid default pager and CustomAdaptor feature of Grid.  

 

Refer the below UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Tom Dimos]

Thanks for the answer but it would be much easier if I could use the SfPager. Is there a way to use it or it's not ready yet.

[Vignesh Natarajan]

Hi Tom,  

 

Thanks for the update.  

 

Query: “but it would be much easier if I could use the SfPager. Is there a way to use it or it's not ready yet” 

 

Currently we do not have support for Pager as a standalone component in Blazor. We have considered the reported query “Data Pager seems to be integrated with Data Grid in Blazor but not in other UI SF Stacks” as feature and added this feature request to our database. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented.  

  

You can also communicate with us regarding the open features any time using our Feature Report page.  

  

https://www.syncfusion.com/feedback/18148/standalone-pager-component-in-blazor  

  

Till then we appreciate your patience. 

 

Regards, 

Vignesh Natarajan   

[Egemen]

Hi, 

I strongly agree with Tom question , I found this thread when I'm searching for my questions to solve the same problem.

As I've already checked other blazor grid vendors and they have more easier solutions on thes type of usage. 

(on first listing setting the int value of grid items count and handle the paging event in next grid item click and send the params to API)

Handling the item counts in repository layer can be better way and best option for many developers.

Other hand , I've solved in initial call , however  now I'm tring to understand custom data adapter structure and pass the other input item values on search event when clicking the outside button 

 

Best regards

 

[Vignesh Natarajan]

Hi Egemen,  

 

Thanks contacting Syncfusion support.  

 

Query: “on first listing setting the int value of grid items count and handle the paging event in next grid item click and send the params to API” 

 

We have analyzed your query to define the initial value for grid items and handle certain actions on pager click. We can achieve your requirement once the reported feature “Standalone Pager component in Blazor  ” is implemented. It will be included in any of our upcoming release. Kindly follow the below feedback and our Syncfusion site for release related updates.  

 

Feedback: https://www.syncfusion.com/feedback/18148/standalone-pager-component-in-blazor  

 

Query: “I've solved in initial call , however  now I'm tring to understand custom data adapter structure and pass the other input item values on search event when clicking the outside button ” 

 

From your query we suspect that you want to perform search operation on external action. We suggest you to achieve your requirement using Search() of Grid. kindly pass the input item values as argument to Search method to perform search action.  

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Search_System_String_  

 

If above solution does not resolve your query, kindly get back to us with more details.  

 

Regards, 

Vignesh Natarajan 

[Egemen]

Hi Vignesh

Thanks for your previous quick response.

Now I've created working example and I needed to modify my own structure.

It's hard to understand the obligation of usage custom dataadapter in grid binding.

I am already handling the data paging in repository layer which is consuming by custom Api.

I was already returning my own IEnumerable type and I just need additionaly to set item count to the grid.

Grid Paging could be handle with possible onread event.

Now I have to modify the code  static objects to use in a custom adapter class and  changed the page from oninitilizedasync to oninitilized by removing async usage, 

(In first load of custom adapter method was getting error with null exeption , I am assigning the controller to static Controller object in order to use ReadAsync method in custom adapter)

Somehow , it's working code but seems to me not the clean code ,   It's increased the complexity of the  page.

[Vignesh Natarajan]

Hi Egemen,  

 

Thanks for the update and your suggestion upon Pager handling using OnRead event.   

 

Query: “I am assigning the controller to static Controller object in order to use ReadAsync method in custom adapter” 

 

We understand that you have achieved your requirement by assigning the static controller to CustomAdaptor class. Yes, it is necessary to initialize the service class when CustomAdaptor is defined as class. If you do not want to initialize the service into Adaptor class we suggest you to inject the service by rendering the CustomAdaptor as  separate component.  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/#custom-adaptor-as-component  

 

Please get back to us with more details, if you have further queries.  

 

Regards, 

Vignesh Natarajan  

 

[ashimaz]

Hi,

I am looking for similar function as paging operation in Grid separately, I have tried custom adapter and webapi DataManagerRequest, but these do not work well with grid complex datasouce, like when column itself is a  list and when I use template.

Example like this

And Output result in grid

Here the grid column it self is a list. for complex grid data list this paging operation in Grid separately is important and looking forward for this in future release.

At the moment I'm force to use (https://www.matblazor.com/Paginator). This is a good example of standalone paging. 

[Vignesh Natarajan]

Hi Ashimaz, 

Thanks for contacting Syncfusion support.  

Query: “for complex grid data list this paging operation in Grid separately is important and looking forward for this in future release.” 

We have analyzed your query and suggestion towards the standalone pager component, thank you for your suggestion. We have already considered the reported query “Data Pager seems to be integrated with Data Grid in Blazor but not in other UI SF Stacks” as feature. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. This feature will be implemented in any of our upcoming releases. We will let you know when this feature is implemented.   

   

You can also communicate with us regarding the open features any time using our feedback page.   

   

https://www.syncfusion.com/feedback/18148/standalone-pager-component-in-blazor   

Till then we appreciate your patience.  Kinldy get back to us with more details if you have further queries. 

Regards, 

Vignesh Natarajan