Grid Paging

[Vikram Singh Vaid]

I have grid with close to 1000 records. I want to retrieve only 100 records from database and display only 100 records per page as the amount of data is large. If I set the page size to 100, it correctly shows 100 records but users are unable to navigate to other pages. It shows only one page in the navigation panel at bottom.

Is there a way I can retrieve 100 records per page and show page links at the bottom for viewing the other records.

[Prathap Senthil]

Hi Vikram,

Greetings from Syncfusion support,

We created a simple sample based on your query, but we were unable to reproduce the issue in our final version[20.3.0 .61]. Kindly refer to the attached sample for your reference.

If the reported issue persists, kindly share the following information with us so that we can validate the reported query and provide a solution as soon as possible.

1. Share with us the entire Grid code snippet along with the model class.
2. Share with us the NuGet version used.
3. If possible, kindly share us the simple issue reproducible sample or modify the reported issue on the below-attached sample.

Regards,

Prathap S

Attachment: BlazorDataGridWithPager_ebbacf89.zip

[Paul]

Your provided sample does not do what the OP wants. This is somthing I want to do, but I haven't found a way to do it yet.

For example:

1. I have 1,000 records in the database.
2. I want to show 100 per page
3. When the page loads, I go to the database and select 100 records only (0 to 99)
4. The grid will show 100 records, but also that there are 10 pages
5. When the user clicks page 2, I will go to the database and select the next 100 records (101 to 199)

Is this possible?

Your example creates and binds 1,000 records to the grid, showing 100 at a time.

It also assigns a value to pageSize that isn't used: pageSize = Orders.Count;

[Prathap Senthil]

After reviewing your query, we understand that the number of pages generated is determined by the rendering count. Unfortunately, it is not possible for us to fulfill this specific request at this time. However, we are always looking for ways to improve our products and services. If you have any other questions or concerns, please let us know. We'll be happy to help.

[Paul]

I would imagne this to be a very common requirement. 

So if, for example, I have 1 million+ records in the database, you're saying that, for the grid to work, I would have to fetch them all from the database and assign them to the grid datasource? If so, this is unworkable surely.

There must be a way of achieving this?

[Prathap Senthil]

Before validating your requirement, how to bind the data in the grid if you are using the datasource property or SfDataManger? Kindly share the details so we can check the feasibility of your requirement.

[Paul]

Hi, thanks for your reply.

Your SfGrid assigns the number of items in the DataSource to the TotaItemCount:

TotalItemCount = DataSource.Count();

I want to set the TotalItemCount myself:

TotalItemCount="@MyTotalItemCount"

The grid would then calculate the number of pages...

MyTotalItemCount / PageSize

...and display the right number of grid navigation buttons.

I would then override the OnActionBegin method and handle navigation/paging, sorting, and searching myself.

In this way I could use the grid with very big datasets more efficiently, without selecting all the records at once.

Maybe this can already be done, but I haven't found the answer yet. I'm new to your grid.

Thanks

[Prathap Senthil]

Thank you for your patience. To proceed with your requirement, could you please provide more information on how you are binding data in the grid, specifically if you are using the datasource property or SfDataManager? We will review your requirement and check its feasibility as soon as possible.

[Paul]

I'm currently using the DataSource property.

I looked at SfDataManager, hoping that it might allow me to achieve what I want, but all the examples I saw required me to assign all records to make the grid work.

[Prathap Senthil]

We recommend using the CustomAdaptor feature of our Grid component to handle your requirement. Our SfDataManger component can retrieve data from a remote service with skip-and-take operations in an on-demand concept. Paging is calculated based on the total record count, which can be customized to fit your needs. Please refer to the below documentation and sample for more information.

https://blazor.syncfusion.com/documentation/datagrid/data-binding#sql-server-data-bindingsql-client

https://github.com/SyncfusionExamples/blazor-grid-sqldatabinding

[Paul]

Thanks

Do you have a more complete example of the CustomAdapter? I've tried to create a simple example, but the Read method is never called.

It isn't clear to me how it works: 

Why are you populating an external list as well as returning a list from the Read method?

 Orders = data.Tables[0].AsEnumerable().Select(...;

 return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;

How and where are the Skip and Take values populated?

Thanks

[Prathap Senthil]

Thanks for the update.

We have attached the complete example of the custom adaptor using the sample you provided. Please refer to the attached file for more information.

Regarding the Read method, it is called whenever the grid needs to retrieve data. You can populate the data in the Read method and return it to the grid. The grid will then bind the returned data to the grid's data source.

Regarding the external list and the list returned from the Read method, the external list is used to store the data temporarily. The list returned from the Read method is used as the data source for the grid. The reason for populating the external list is to retrieve the data once from the data source and then use it for subsequent operations like filtering, sorting, and paging.

Regarding the Skip and Take values, these values are automatically calculated based on the grid's page size and the current page index. They are used to retrieve the data from the data source in a specific range.

Attachment: blazorgridsqldatabinding_6d2e3fa6.zip

[Paul]

Hi,

This is the same sample I've been playing with before. 

The 'Read' method is never called. What do I have to do to wire the CustomDataAdapter to the Grid so the Read method is called when the Grid is rendered? At the moment, I just see an empty grid.

Should this work out of the box, or do I need to configure something else?

Does this work for you?

Thanks

[Prathap Senthil]

Regarding your query, the Read method is called during the initial rendering of the Grid. The Datasource returned from the Read/ReadAsync method will only be displayed in the Grid, and every data-related operation will trigger the Read/ReadAsync method of CustomAdaptor. However, if the issue persists, we kindly request that you provide a simple reproducible sample. Alternatively, if possible, please try modifying the attached sample to see if the issue can be reproduced there. This will help us identify the root cause of the issue and provide you with an appropriate solution.

Attachment: EFGrid_be8bccf1.zip