CustomAdaptor for DataGrid

[Jan]

Hello,

I'd like to ask, how I can resolve my problem. I developing a Blazor Client app with ASP.NET Core like backend WebAPI for retrieve data.

I used this versions:

• .NET Core SDK: Version:   3.1.301
• Syncfusion.Blazor 18.1.0.59
  

On API, I implemented pagination for data. I take query parameters in URL for example:

api/ApplicationUserRead?pageNumber={pageNumber}&pageSize={pageSize}

In response I send all needed information, like count of total pages and count of all items, etc.

What I need is, learn Data Grid to call this API, so when I clicked on next page, I want to call API with appropriate parameters. So I look on Custom Adaptors. I tried implement one for my data. There I call API for retrieve data but it's doesn't work, DataGrid is empty. 

How I can call my API from DataGrid? Is this the good way or there is another approach to reach that goal?

I attached Adaptor, page with Datagrid and response JSON. 

Attachment: CustomAdaptorBlazor_71f125eb.zip

[Jan]

I fix empty state of grid, but now I have problem with action to load another page. I attached updated source files. 

First load is ok for now. But when I want go to next page, or clicked on some page number, there is never ending load.

Attachment: CustomAdaptorBlazor_b9ae54d6.zip

[Rahul Narayanasamy]

Hi Jan, 

Greetings from Syncfusion. 

We have validated your query and you have faced difficulties while performing paging operation with WebApi. Here, we have prepared a sample based on your requirement. You can use default DataOperations class to perform paging operations.  Find the sample for your reference. 

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

Also, you have used both DataSource property of SfGrid and SfDataManager simultaneously to same Grid. Both of them (DataSource and SfDataManager) are used to bound DataSource to Grid. So you need to set any one to a single Grid(Either use DataSource or SfDataManager to bind data to Grid). Both of them must not be defined simultaneously for a single Grid. 

 

Reference: 

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

https://blazor.syncfusion.com/documentation/datagrid/data-binding/#web-api 

 

If you are facing any difficulties, then could you please share the below details. It will be helpful to validate and provide a better solution. 

 

• Did you faced any console errors?
• Bind OnActionFailure event to grid and share the error details if you have faced any errors.
• Video demonstration of the issue.
• Reproduce the problem in the provided sample.
• Share a simple reproduceable sample if possible.

 

Regards, 

Rahul 

 

[Jan]

Hello Rahul,

thank you for your example. I played a little bit with that. I think that's a way, what I was looking for. I will try to use it in my implementation. I will let you know when I'm done. 

Basically, If data grid will have some events like next page or change page clicked with number of page in parameters that's will be best way for my scenario, then I can call my API with parameters what I need. I'd like to keep my API in this way, because I implemented it according to REST architectural style.

Best Regards,

Jan

[Jan]

Great news I finally figured out how to get result what I want. My solution is attached. 

Basically I use your WebAPI data adaptor and I used part of your implementation for parsing query parameters. Then I used parameters for my repository where I do all filtering, order by and paging.

But I have one more problem, because I using Fluxor (Redux) for my client side pages. I will have to integrate this solution to Fluxor. It will be interesting task. One thing come to my mind, I can use data source like on this page and action for create, update and etc. I left like Fluxor actions.

Thank you for your help.

Attachment: Solution_155583_d7f83d9e.zip

[Rahul Narayanasamy]

Hi Jan, 

 

Thanks for the update. 

 

We are glad to hear that you have achieved your requirement. Please get back to us if you need further assistance. 

 

Regards, 

Rahul