EjsGrid doesn't display records.

[Laimis]

Hello,

I'm trying to implement OData protocol with EjsGrid in Blazor WebAssembly, but when response is received records is not appears in grid.

Component usage:

<EjsGrid AllowPaging="true" AllowFiltering="false" AllowSorting="true" TValue="FoodCategoryDto" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings>

        @*<GridSearchSettings Operator="Syncfusion.EJ2.Blazor.Operator.Contains" IgnoreCase="true"></GridSearchSettings>*@

        <EjsDataManager Url="https://localhost:44302/api/foodCategories" CrossDomain="true" Adaptor="Syncfusion.EJ2.Blazor.Adaptors.ODataV4Adaptor"></EjsDataManager>

        <GridPageSettings PageCount="5"></GridPageSettings>

        <GridColumns>

            <GridColumn Field=@nameof(FoodCategoryDto.Name) HeaderText="Name"></GridColumn>

        </GridColumns>

    </EjsGrid>

From web browser, data manager sending request:

https://localhost:44302/api/foodCategories?$count=true&$skip=0&$top=12

Receive response:

[{id: "51874022-65b4-4969-ade4-f5561ed27dec", name: "Test", foodSubCategories: null}]

Dto model:

public class FoodCategoryDto

    {

        public string Id { get; set; }

        public string Name { get; set; }

        public IEnumerable<FoodSubCategoryDto> FoodSubCategories { get; set; }

    }

[Renjith Singh Rajendran]

Hi Laimis, 

Thanks for contacting Syncfusion support. 

 

We have analyzed the below shared response and its like a flat json data array. We suspect that this might have caused the problem. 

 

Receive response: 

[{id: "51874022-65b4-4969-ade4-f5561ed27dec", name: "Test", foodSubCategories: null}] 

As Syncfusion Blazor DataManager expects value and count from Odatav4 service(as shown in the screenshot below) but above response is flat array. We suggest you to return the ODataV4Service response as like the below screenshot. 

 

 

Documentation : https://ej2.syncfusion.com/blazor/documentation/grid/data-binding/#binding-with-odata-v4-services 

Please ensure to add the below codes in your startup.cs file. 

 

        public void Configure(IApplicationBuilder app, IHostingEnvironment env) 

        { 

            app.UseMvc(b => 

            { 

                b.Select().Expand().Filter().OrderBy().MaxTop(100).Count(); 

                b.MapODataServiceRoute("odata", "odata", GetEdmModel()); 

            }); 

        } 

If you are still facing difficulties, then kindly get back to us with the following details for better assistance, 

1. Share the screenshot of the Network tab response.
2. Share the screenshot of rendered Grid and the details of script error if any occurred in the browser console.

And also we suggest you to bind the “OnActionFailure” event to Grid. This event will be triggered for every failure in Grid. Please share the details you get the “args.Error” for further analysis. 

Documentation : https://ej2.syncfusion.com/blazor/documentation/grid/events/#onactionfailure 

 

<EjsGrid TValue="Order" ...> 

        <GridEvents OnActionFailure="OnActionFailure" TValue="Order"></GridEvents> 

        ... 

   </EjsGrid> 

 

@code{ 

    ... 

   public void OnActionFailure(FailureEventArgs args) 

    { 

        Console.WriteLine(args.Error);         //Share the details you get in the args.Error  

    } 

    ... 

} 

 

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 

Renjith Singh Rajendran. 

[Laimis]

Sorry for disturb, there was my fail, I have configured wrong OData. OData endpoint prefix is "odata" not "api"

[Vignesh Natarajan]

Hi Laimis,  

Thanks for the update. 

We are glad to hear that you have resolved your query on your own.  

Kindly get back to us if you need any further assistance on this query. 

Regards, 

Vignesh Natarajan.