1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. How to use webapi binding data to Grid ?

How to use webapi binding data to Grid ?

Hi, I try to use Grid and binding webapi(core web api) to display data, If I send Http Get request to the webapi, it will return string like this
 
[{"address":"507 - 20th Ave. E.\r\nApt. 2A","city":"Seattle"},{"address":"908 W. Capital Way","city":"Tacoma"},{"address":"722 Moss Bay Blvd.","city":"Kirkland"},{"address":"4110 Old Redmond Rd.","city":"Redmond"},{"address":"14 Garrett Hill","city":"London"},{"address":"Coventry House\r\nMiner Rd.","city":"London"},{"address":"Edgeham Hollow\r\nWinchester Way","city":"London"},{"address":"4726 - 11th Ave. N.E.","city":"Seattle"},{"address":"7 Houndstooth Rd.","city":"London"}]
No meter use browser, postman, fiddler, they can return same result, so the webapi is ok.

How can I setting let Grid can receive data from webapi ?

Razor
@Html.EJS().Grid("grid1").DataSource(dataManager => { dataManager.Url("http://localhost:7379/api/data").CrossDomain(true).Adaptor("WebApiAdaptor"); }).Columns(col=> {
        col.Field("address").HeaderText("address").Add();
        col.Field("city").HeaderText("city").Add();
    }).ActionFailure("actionFailure").Render();


TagHelper
<ejs-grid id="grid2" >
        <e-data-manager url="http://localhost:7379/api/data" adaptor="WebApiAdaptor" crossDomain="true"></e-data-manager>
        <e-grid-columns>
            <e-grid-column field="address" headerText="Address" type="string" textAlign="Right" width="120"></e-grid-column>
            <e-grid-column field="city" headerText="City" type="string" width="140"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>


version Syncfusion.EJ2 16.0.1.37

5 Replies
RS Renjith Singh Rajendran Syncfusion Team May 30, 2018 12:21 PM UTC

Hi LiuTzuYi, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suggest you to return the values from the Get() method as Items and Count pair. Based on your requirement, we have prepared a sample to bind data to Grid using WebApiAdaptor. Please download the sample from the link below, 
 
Please refer the code examples below, 

        public object Get() 
        { 
            ... 
           return Json(new { Items = data.Skip(skip).Take(take), Count = data.Count() }); 
        } 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


LI LiuTzuYi replied to Renjith Singh Rajendran May 31, 2018 10:56 AM UTC

Hi LiuTzuYi, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suggest you to return the values from the Get() method as Items and Count pair. Based on your requirement, we have prepared a sample to bind data to Grid using WebApiAdaptor. Please download the sample from the link below, 
 
Please refer the code examples below, 

        public object Get() 
        { 
            ... 
           return Json(new { Items = data.Skip(skip).Take(take), Count = data.Count() }); 
        } 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


Hi 
I change my Web API Controller like this

Controller

    [Produces("application/json")]
    [Route("api/Data")]
    public class DataController : Controller
    {
        private northwindContext Context;
        public DataController(northwindContext context)
        {
            Context = context;
        }
        [HttpGet]
       
        public IActionResult GetEmployee() {
            return Json(new { Items = Context.Employees.Select(s => new { Address = s.Address, City = s.City }), Count = Context.Employees.Count() });

        }
    }
Result
{"items":[{"address":"507 - 20th Ave. E.\r\nApt. 2A","city":"Seattle"},{"address":"908 W. Capital Way","city":"Tacoma"},{"address":"722 Moss Bay Blvd.","city":"Kirkland"},{"address":"4110 Old Redmond Rd.","city":"Redmond"},{"address":"14 Garrett Hill","city":"London"},{"address":"Coventry House\r\nMiner Rd.","city":"London"},{"address":"Edgeham Hollow\r\nWinchester Way","city":"London"},{"address":"4726 - 11th Ave. N.E.","city":"Seattle"},{"address":"7 Houndstooth Rd.","city":"London"}],"count":9}


Razor

@Html.EJS().Grid("grid1").DataSource(dataManager => { dataManager.Url("/api/data").CrossDomain(true).Adaptor("WebApiAdaptor"); }).Columns(col=> {
        col.Field("address").HeaderText("address").Add();
        col.Field("city").HeaderText("city").Add();
    }).ActionFailure("actionFailure").Render()

TagHelper

       
       
           
           
       
       
    
           
       


the Grid still not binding data. I have a slow Internet connection, can not download your sample or upload file. 
What is most reason cause the error ?

RS Renjith Singh Rajendran Syncfusion Team June 1, 2018 11:31 AM UTC

Hi LiuTzuYi, 

We suspect that you are facing serialization problem. To render the Grid data, column’s field names and the property name in the data source should be same. After that Grid will be rendered with data. Due to serialization problem, your field name’s casing is changed and so there is a mismatch in the column’s field and datasource’s property names, this is why you don’t have data in Grid.  

To overcome this serialization problem, we suggest you to add the JsonOutputFormatter options under the Startup.cs file. JsonOutputFormatter is a TextOutputFormatter for JSON content. Please refer the sample below, 

Index.cshtml 
 
    <ejs-grid id="Grid1" allowPaging="true"> 
        <e-data-manager url="/api/Orders/" adaptor="WebApiAdaptor" crossDomain="true"></e-data-manager>  //Remove offline property 
        ... 
   </ejs-grid> 

Startup.cs 

public void ConfigureServices(IServiceCollection services) 
        { 
            // Add framework services. 
            services.AddMvc().AddJsonOptions(options => 
            { 
                options.SerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver(); 
            }); 
        } 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


LI LiuTzuYi June 4, 2018 10:59 AM UTC

thanks for your help, 
my problem is column's field not match datasource's property name and not do JsonOutputFormatter correctly !
thanks again !


RS Renjith Singh Rajendran Syncfusion Team June 5, 2018 05:16 AM UTC

Hi LiuTzuYi, 

Thanks for the update. 

We are happy to hear that your requirement has been achieved. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


Loader.
Up arrow icon