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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

data dont show in grid

Thread ID:

Created:

Updated:

Platform:

Replies:

145880 Jul 11,2019 07:32 PM UTC Jul 15,2019 10:16 AM UTC Blazor 4
loading
Tags: Grid
ebi torabi
Asked On July 11, 2019 07:32 PM UTC

in hosted core blazor data is taken from the database but in the grid. Of course, in your example , the data is displayed, but the next two example will not be displayed.
@page "/"
@inject HttpClient Http
@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Grids
<h1>Hello, world!</h1>
Welcome to your new app.
<EjsGrid ID="Grid" Allowpaging="true">
    <EjsDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Orders" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager>
    <GridColumns>
        <GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field="CustomerID" HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field="OrderDate)" HeaderText=" Order Date" Format="yMd" Type="date" TextAlign="@TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field="Freight" HeaderText="Freight" Visible="false" Format="C2" TextAlign="@TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="150"></GridColumn>
    </GridColumns>
</EjsGrid>

<SurveyPrompt Title="How is Blazor working for you?" />
<p>jbgjhjhjhikjijhik</p>
<EjsGrid ID="Grid1" Allowpaging="true" @ref="@grid" >
    <EjsDataManager Url="/api/TemperamentPropertiesCategory1" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager>
    <GridColumns>
        <GridColumn Field="TemperamentPropertyCategoryId" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field="TemperamentPropertyCategoryName" HeaderText="Customer Name" Width="150"></GridColumn>

    </GridColumns>
</EjsGrid>
<EjsGrid ID="Grid2" Allowpaging="true" >
    <EjsDataManager Json="@temperlist" Adaptor="Adaptors.JsonAdaptor"></EjsDataManager>
    <GridColumns>
        <GridColumn Field=@nameof(HerbalTeas.HerbalTeaId ) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(HerbalTeas.HerbalTeaName) HeaderText="Customer Name" Width="150"></GridColumn>

    </GridColumns>
</EjsGrid>
@code {
    EjsGrid grid;
    HerbalTeas[] temperlist;
    protected override async Task OnInitAsync()
    {
       
        temperlist = await Http.GetJsonAsync<HerbalTeas[]>("api/HerbalTeas/GetAll");
    }

}
---------------------------------------------------------------------------------------------------------------------------
[controller]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Primitives;
using Newsha.Server.DataAccess.UnitOfWork;
using Newsha.Shared.Models;
namespace Newsha.Server.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TemperamentPropertiesCategory1Controller : ControllerBase
    {
        private UnitOfWork _UW = new UnitOfWork();
        [HttpGet]
        public object Get()
        {
            IEnumerable<TemperamentPropertiesCategory> data = _UW.TemperamentPropertiesCategory.FindAll(); ;
            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;
            }
              
        }

        // GET: api/Default/5
        [HttpGet("{id}", Name = "Get")]
        public async Task<object> Get(int id)
        {
            return await _UW.TemperamentPropertiesCategory.FindByIDAsync(id);
        }

        // POST: api/Default
        [HttpPost]
        public async Task Post([FromBody] TemperamentPropertiesCategory TemperamentPropertiesCategory)
        {

            if (ModelState.IsValid)
            {
                await _UW.TemperamentPropertiesCategory.CreateAsync(TemperamentPropertiesCategory);
                await _UW.Commit();
            }

        }
        

        // PUT: api/Default/5
        [HttpPut]
        public async Task Put([FromBody] TemperamentPropertiesCategory TemperamentPropertiesCategory)
        {
            if (ModelState.IsValid)
            {
                _UW.TemperamentPropertiesCategory.Update(TemperamentPropertiesCategory);
                await _UW.Commit();
            }

        }
        

        // DELETE: api/ApiWithActions/5
        [HttpDelete("{id}")]

        public async Task Delete([FromBody] TemperamentPropertiesCategory TemperamentPropertiesCategory)
        {
            if (ModelState.IsValid)
            {
                _UW.TemperamentPropertiesCategory.Delete(TemperamentPropertiesCategory);
                await _UW.Commit();
            }

        }
       
    }
}

Vignesh Natarajan [Syncfusion]
Replied On July 12, 2019 12:24 PM UTC

Hi Edi Torabi,  

Thanks for contacting Syncfusion forums.  

Query: “n hosted core blazor data is taken from the database but in the grid. Of course, in your example , the data is displayed, but the next two example will not be displayed. 

From your query we understand that you are facing issue while binding the dataSource to Grid from WebAPI controller. We have prepared a sample as per your suggestion and we are not able to reproduce the reported issue at our end. But you have mentioned that Data is not displayed in Grid.  

We suspect that blank rows are rendered in Grid due to camel case issue. This issue occurred when serializing the return values. For WebAPI Adaptor data must be retuned in form of Items and Count. But in Asp.NetCore while serializing it gets converted into items and count. This may be the cause of an issue. If you are facing above issue, kindly include the below code example in your startup.cs file.  

public void ConfigureServices(IServiceCollection services) 
        { 
            services.AddMvc().AddNewtonsoftJson(); 
            services.AddMvc().AddNewtonsoftJson(options => { 
                options.SerializerSettings.ContractResolver = new DefaultContractResolver(); 
            }); 

            …………………………………. 
        } 
 

For your convenience we have attached the sample which can be downloaded from below  


After try out the above solution, if you are still facing the issue kindly share the following details.  

  1. Share the screenshot of network tab, how the dataSource is returned from webAPI?.
  2. Screenshot of script error in console with full tack trace (if any).
  3. If possible try to reproduce the reported issue at our end.

For the Third Grid, you have used Json Adaptor to bind the dataSource as local data from WebAPI controller. Can you please share the following details along with above details. 

  1. Share the GetAll() method in controller along with its return type. Because while binding local data, entire dataSource must be returned to Grid.
  2. If you are facing  any script error in console. Kindly share the screenshot of the issue.
   
Requested details will be helpful for us to validate the reported issue at our end and provide the solution as soon as possible. 

Regards, 
Vignesh Natarajan. 


ebi torabi
Replied On July 13, 2019 09:17 AM UTC

Hi Edi Torabi,  

Thanks for contacting Syncfusion forums.  

Query: “n hosted core blazor data is taken from the database but in the grid. Of course, in your example , the data is displayed, but the next two example will not be displayed. 

From your query we understand that you are facing issue while binding the dataSource to Grid from WebAPI controller. We have prepared a sample as per your suggestion and we are not able to reproduce the reported issue at our end. But you have mentioned that Data is not displayed in Grid.  

We suspect that blank rows are rendered in Grid due to camel case issue. This issue occurred when serializing the return values. For WebAPI Adaptor data must be retuned in form of Items and Count. But in Asp.NetCore while serializing it gets converted into items and count. This may be the cause of an issue. If you are facing above issue, kindly include the below code example in your startup.cs file.  

public void ConfigureServices(IServiceCollection services) 
        { 
            services.AddMvc().AddNewtonsoftJson(); 
            services.AddMvc().AddNewtonsoftJson(options => { 
                options.SerializerSettings.ContractResolver = new DefaultContractResolver(); 
            }); 

            …………………………………. 
        } 
 

For your convenience we have attached the sample which can be downloaded from below  


After try out the above solution, if you are still facing the issue kindly share the following details.  

  1. Share the screenshot of network tab, how the dataSource is returned from webAPI?.
  2. Screenshot of script error in console with full tack trace (if any).
  3. If possible try to reproduce the reported issue at our end.

For the Third Grid, you have used Json Adaptor to bind the dataSource as local data from WebAPI controller. Can you please share the following details along with above details. 

  1. Share the GetAll() method in controller along with its return type. Because while binding local data, entire dataSource must be returned to Grid.
  2. If you are facing  any script error in console. Kindly share the screenshot of the issue.
   
Requested details will be helpful for us to validate the reported issue at our end and provide the solution as soon as possible. 

Regards, 
Vignesh Natarajan. 


 https://www.syncfusion.com/downloads/support/directtrac/145880/ze/EFGrid_-_CRUD_-_P61253481616  
hi. Thanks for your prompt reply .
I went through your example, but when I installed Microsoft.EntityFrameworkCore and Microsoft.EntityFrameworkCore.SqlServer on Newsha.Shared, I encountered the following error(Attached txt file).

Newsha.Server.Startup----------------------------------------------------------------------
 public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc().AddNewtonsoftJson();
            services.AddMvc().AddNewtonsoftJson(options => {
                options.SerializerSettings.ContractResolver = new DefaultContractResolver();
            });
            services.AddResponseCompression(opts =>
            {
                opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                    new[] { "application/octet-stream" });
            });
        }
-----------------------------------------------------------------------


Attachment: New_folder_5e75d5c4.rar

ebi torabi
Replied On July 13, 2019 09:49 AM UTC

For the Third Grid, you have used Json Adaptor to bind the dataSource as local data from WebAPI controller. Can you please share the following details along with above details
hi. Thanks for your prompt reply .

Newsha.Server =>Startup---------------------------------------------
 public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc().AddNewtonsoftJson();
            services.AddMvc().AddNewtonsoftJson(options => {
                options.SerializerSettings.ContractResolver = new DefaultContractResolver();
            });

            services.AddResponseCompression(opts =>
            {
                opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                    new[] { "application/octet-stream" });
            });
        }
controller -----------------------------------------------------------

[HttpGet]
        public object Get()
        {
            IEnumerable<TemperamentPropertiesCategory> data = _UW.TemperamentPropertiesCategory.FindAll(); ;
            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;
            }
              
        }
index.razor--------------------------------------------------
@if (temperlist != null)
{
    <p>@temperlist.Count()</p>}
<EjsDropDownList ID="Employees12" PlaceHolder="Select a Employee" AllowFiltering="true" >
    <EjsDataManager Json="@temperlist"  Adaptor="@Syncfusion.EJ2.Blazor.Adaptors.JsonAdaptor"></EjsDataManager>
    <DropDownListFieldSettings Value="TemperamentPropertyCategoryName"></DropDownListFieldSettings>

</EjsDropDownList>

@code {
    EjsGrid grid;

    public string Query { get; set; } = "new ej.data.Query().select(['TemperamentPropertyCategoryName']).take(7).requiresCount()";
    TemperamentPropertiesCategory[] temperlist;


    protected override async Task OnInitAsync()
    {

        temperlist = await Http.GetJsonAsync<TemperamentPropertiesCategory[]>("api/TemperamentPropertiesCategory1");
        
    }

}


Vignesh Natarajan [Syncfusion]
Replied On July 15, 2019 10:16 AM UTC

Hi Ebi Torabi,  

Thanks for the details.  

Query: “I went through your example, but when I installed Microsoft.EntityFrameworkCore and Microsoft.EntityFrameworkCore.SqlServer on Newsha.Shared, I encountered the following error(Attached txt file). 

We have analyzed the provided script error and it is not related to Gird component issue. The reported issue has occurred due to IL linker issue in Blazor component. To resolve the issue kindly include the below highlighted link in your client [.csproj] file. 

<PropertyGroup> 
    <TargetFramework>netstandard2.0</TargetFramework> 
    <OutputType>Exe</OutputType> 
    <LangVersion>7.3</LangVersion> 
    <RazorLangVersion>3.0</RazorLangVersion> 
    <BlazorLinkOnBuild>False</BlazorLinkOnBuild> 
  </PropertyGroup> 
   
Please find some general link regarding the issue you are facing.  


Note: ensure the clear the project and also to remove bin and Obj file in your project. Then, try to run again sample with above highlighted code. If you are still facing the issue, kindly share the Network tab details regarding the data returned from API server. 

Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 


CONFIRMATION

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