We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Empty grid with WebApiAdaptor.

Thread ID:





149831 Dec 11,2019 09:17 AM UTC Dec 13,2019 01:39 PM UTC Blazor 3
Tags: Grid
Asked On December 11, 2019 09:17 AM UTC


I’m using WebApiAdaptor in the grid, but the result is an empty grid even if the API is returning values. Adding items works fine.

If I load the grid with OnInitializedAsync() and using Http.GetJsonAsync() everything works.

See attached sample. 

Attachment: Syncfusion.Blazor_c25a79bc.zip

Vignesh Natarajan [Syncfusion]
Replied On December 12, 2019 09:08 AM UTC

Hi Stefan,  

Greetings from Syncfusion support.  

Query: “I’m using WebApiAdaptor in the grid, but the result is an empty grid even if the API is returning values 
We are able to reproduce the reported issue in your sample at our end. While using WebAPI adaptor, data must be return in the form of Items and Count. But in your sample, you have returned the data in form of json objects. This is cause of the issue. Kindly return the values in form of Items and Count to resolve the issue. Refer the below code example. 

        public object Get() 
            var orders = new List<Order>(); 
. . . . . . . . . . . 
            return new { Items = orders,Count = orders.Count() }; 

We have modified your sample which can be downloaded from below 

Refer our UG documentation for your reference  

Please get back to us if you have further queries.  

Vignesh Natarajan.

Replied On December 12, 2019 03:58 PM UTC


Thanks for the quick reply. My problem is that the API is used by other products and I don't want to make any changes there.
How do I solve that? By creating a CustomAdaptor for CRUD operations?

I've solved the reading problem with the code in the attached images but the updates won't work in this case.  



Rahul Narayanasamy [Syncfusion]
Replied On December 13, 2019 01:39 PM UTC

Hi Stefan, 
Thanks for your update. 
We have validated your query and while using the “WebApiAdaptor” the CRUD request will be “POST”,”PUT”,”DELETE”. All the CRUD operations will be performed based on the provided Url property in the EjsDataManager. You don’t need to provide InsertUrl, UpdateUrl and DeleteUrl  separately in EjsDataManager. 
Also, you have used both DataSource property of EjsGrid and WebApiAdaptor of EjsDataManager simultaneously to same Grid. Both of them (DataSource and EjsDataManager) are used to bound DataSource to Grid. So you need to set any one to a single Grid(Either use DataSource or EjsDataManager to bind data to Grid). Both of them must not be defined simultaneously for a single Grid. 
By default when using WebAPI adaptor, dataSource must be return in the form of Items and Count. Since you don’t want to return the dataSource as Items and Count, then you can bind the Grid dataSource by using GetJsonAsync method. Also you can bind the Grid dataSource by using CustomAdaptor. Find the below code snippets and documentation link for your reference. 
[code snippets] 
<EjsGrid Height="315" TValue="OrdersDetails" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })"> 
    <EjsDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></EjsDataManager> 
    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings> 
        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
    public static List<OrdersDetails> forecasts; 
    protected override async Task OnInitializedAsync() 
        forecasts = await Http.GetJsonAsync<List<OrdersDetails>>("api/Default"); 
    public class CustomAdaptor : DataAdaptor 
        // Performs data Read operation 
        public override object Read(DataManagerRequest dm, string key = null) 
            return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource; 
        // Performs Insert operation 
        public override object Insert(DataManager dm, object value, string key) 
        // Performs Remove operation 
        public override object Remove(DataManager dm, object value, string keyField, string key) 
        // Performs Update operation 
        public override object Update(DataManager dm, object value, string keyField, string key) 
Find the below documentation link for more information. 

Please get back to us if you need further assistance. 



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon