The data is not displayed in the grid

[ebi torabi]

.NET Core 3.1 Preview 1

ej2 17.3.26

Hosted core

@page "/AllergyCategoriesPage"

@inject HttpClient http

<EjsGrid  @ref="@grid" TValue="AllergyCategories" EnableRtl="true" AllowFiltering="true" AllowResizing="true" AllowSorting="true" AllowTextWrap="true" ShowColumnChooser="true" ShowColumnMenu="true" GridLines="@GridLine.Both" Height="100%" AllowGrouping="true" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

    <EjsDataManager Adaptor="Adaptors.WebApiAdaptor" Url="api/AllergyCategories"></EjsDataManager>

    <GridFilterSettings Type="@Syncfusion.EJ2.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

    <EjsPager PageSize="12"></EjsPager>

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

    <GridColumns>

        <GridColumn Field=@nameof(AllergyCategories.AllergyCategoryId) HeaderText="AllergyId" TextAlign="@TextAlign.Center" IsPrimaryKey="true" IsIdentity="true"></GridColumn>

        <GridColumn Field=@nameof(AllergyCategories.AllergyCategoryName) HeaderText="AllergyName" TextAlign="@TextAlign.Center" ValidationRules="@(new { required= true })"></GridColumn>

    </GridColumns>

</EjsGrid>

@code{

   EjsGrid<AllergyCategories> grid;

  

}

    [Route("api/[controller]")]

    [ApiController]

    public class AllergyCategoriesController : ControllerBase

    {

       private readonly AllergyCategoriesDataAccessLayer db = new AllergyCategoriesDataAccessLayer();

        [HttpGet]

        public object Get()

        {

            IQueryable<AllergyCategories> data = db.GetAll();

            var count = data.Count();

            var queryString = Request.Query;

            if (queryString.Keys.Contains("$inlinecount"))

            {

                StringValues Skip;

                StringValues Take;

                int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0;

                int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count();

                return new { Items = data.Skip(skip).Take(top), Count = count };

            }

            else

            {

                return  data;

            }

        }

[Vignesh Natarajan]

Hi Ebi Torabi,  

Thanks for contacting Syncfusion forums.  

Query: “the data is displayed in grid” 

We have analyzed your code example and we suspect that you are facing Camel Case issue in Asp.Net Core. Normally, ASP.NET Core 1.0+ framework has camel casing issues while serializing the JSON Object. If you are facing the same camel casing issue while running the sample then please use the below codes in Startup.cs file to overcome that casing issue in Application level.  

 

In the below code, we have called the ContractResolver options under the Startup.cs file to avoid camel casing conversion during the serialization process. The is related to ASP.NET Core specifics and we suggest refer to the following article which describes how to overcome a similar issues. 

 

Reference Link: https://dotnetcoretutorials.com/2017/01/02/pascalcase-vs-camelcase-asp-net-core/  

 

Please use the code below, 

[Startup.cs] 

 

        public void ConfigureServices(IServiceCollection services) 

        { 

 

            services.AddMvc().AddNewtonsoftJson(options => { 

                options.SerializerSettings.ContractResolver = new DefaultContractResolver(); 

            }); 

       } 

 

Refer our UG documentation for your reference 

https://ej2.syncfusion.com/blazor/documentation/grid/data-binding/#troubleshoot-grid-renders-without-data-even-though-server-returns-with-correct-data  

 

If you are not facing the camel case issue or above solution does not resolve your query, kindly get back to us with details regarding the data returned from server (console -> network tab -> response window screenshot). 

Regards,
Vignesh Natarajan 

[ebi torabi]

Hi Unfortunately, it doesn't work on the Hosted core. Please give an example in Hosted core.

[Vignesh Natarajan]

Hi Ebi, 

Query: “Hi Unfortunately, it doesn't work on the Hosted core. Please give an example in Hosted core.” 

As per your request, we have prepared a Hosted application in .Net Core 3.1 Preview 1 using our latest version Nuget package (17.3.0.26-beta). We are able to bind data properly from WebAPI controller to Grid. Kindly download the sample from below.  

Sample: https://www.syncfusion.com/downloads/support/forum/148866/ze/BlazorApp1463649873  

After referring the sample if you are still facing the issue, kindly get back to us with more details.     

Regards, 

Vignesh Natarajan.