1. Home
  2. Forum
  3. Blazor
  4. Empty grid with WebApiAdaptor.

Empty grid with WebApiAdaptor.

Hi

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

3 Replies
VN Vignesh Natarajan Syncfusion Team 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. 

[HttpGet] 
        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.  

Regards, 
Vignesh Natarajan.

ST Stefan December 12, 2019 03:58 PM UTC

Hi,

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.  

Regards,

/Stefan


RN Rahul Narayanasamy Syncfusion Team 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> 
    <GridColumns> 
        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        ... 
   </GridColumns> 
</EjsGrid> 
 
 
@code{ 
    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. 

Regards, 
Rahul 


Loader.
Up arrow icon