1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Setting Grid DataSource to JSON displays no rows

Setting Grid DataSource to JSON displays no rows

I am trying to populate an ejs-grid grid by fetching JSON from a web api method and the grid just displays "No records to display".  I am calling the below JS function to load the grid on a button click.  The method fires and returns JSON records but setting the dataSource property has no effect. It is finding the grid ok when logging it to the console. I have tried calling the .refresh()method to no effect.  I have also tried assigning an object array directly to the dataSource property to no effect.

This is running in ASP.NET Core on a Razor Page and is using 18.2.0.46 of the Syncfusion package.

I hope you can help, this is very frustrating and difficult to debug as I'm not getting any errors.

The JS function is:
function loadGrid() {
    var grid = document.getElementById('grdTeam').ej2_instances[0]; // Grid instance 
    var ajax = new ej.base.Ajax('/api/data/groupmembers/2', 'GET');
    ajax.send();
    ajax.onSuccess = function (data) {
         console.log(data);
         grid.dataSource = JSON.parse(data);
         //grid.refresh();
    };
}

The grid is defined as:
<ejs-grid id="grdTeam">
    <e-grid-columns>
        <e-grid-column field="entityCode" headerText="Code" textAlign="Left" width="250"></e-grid-column>
        <e-grid-column field="entityName" headerText="Name" textAlign="Left" width="300"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

5 Replies
RS Rajapandiyan Settu Syncfusion Team September 1, 2020 11:09 AM UTC

Hi Ade, 

Greetings from Syncfusion support. 

We have analyzed your query and understood that you need to bind the data to the Grid on ajax success. We have prepared a sample with your code example and everything works fine at our end.  

Please refer to the below sample and screenshot for more information.   


 

If you still face the same problem, please share the below details to find the root cause of the problem. 
  1. Share the complete Grid code you have used.
  2. Share the screenshot of JSON.parse(data) in the ajax success event.
  3. Use the actionFailure event in Grid and let us know if you face any exceptions or errors in that event.
  1. If possible share the simple issue reproducible sample or make the issue in the given sample.
  2. Share the screenshot if you are facing any console error.

Regards, 
Rajapandiyan S 


AB Ade Bullock September 1, 2020 12:39 PM UTC

Thanks for your help.  I ran your code and it worked successfully then ran against my api and it didn't.  My api was not formatting the JSON quite right so the JSON looked like this at the start:
{"data":[{"groupMemberId":1034 ....
In my api controller method I was using  return Json(new { data = result }); to return the data as JSON.  I changed this to return Json(result); and the format was correct and it worked.  This does return the JSON as camel case so I had to change the field names on the columns to be camel case to see the data.  The docs on fixing this on the Syncfusion site are a bit out of date now (eg https://www.syncfusion.com/forums/141644/empty-grid-with-urladaptor) as the SerializerSettings ContractResolver is not available in the latest version of .NET Core.

Thanks again

RS Rajapandiyan Settu Syncfusion Team September 2, 2020 10:23 AM UTC

Hi Ade, 

We are glad that the provided solution resolved your requirement. 

Query :  This does return the JSON as camel case so I had to change the field names on the columns to be camel case to see the data.  the SerializerSettings ContractResolver is not available in the latest version of .NET Core. 
 
To resolve the reported problem, we need to add below default ContractResolver in Startup.cs file. 

If the ASP.NET CORE version is 2.X then add the below code in startup.cs file 


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

 
 
If the ASP.NET CORE version is 3.X then add the below code in startup.cs file 
 
 
 
public void ConfigureServices(IServiceCollection services) 
          { 
                      services.AddMvc().AddNewtonsoftJson(options => 
          { 
                 options.SerializerSettings.ContractResolver = 
                    new DefaultContractResolver();
          }); 
             
        } 
 
 
To use AddNewtonsoftJson in your project we need include the Microsoft.AspNetCore.Mvc.NewtonsoftJson assembly 
 
 
 
Note : We need to install NewtonSoft.JSON as dependency since Syncfusion.EJ2.AspNet.Core dependent to NewtonSoft.JSON package. 
 
Refer to the below documentation for more information. 
 
 
If you still face the same issue, please share the below details to validate further with this. 
  1. Share the ASP.NET CORE version you have used.
  2. If possible share the issue reproducible sample or make the issue in the given sample.
 
Regards, 
Rajapandiyan S 


DG Don Griffes July 19, 2021 04:13 PM UTC

I had the same issue... after lots of experimentation I discovered that EnablePersistence = true was causing the grid to show blank rows.  This is definitely a bug... when I turned off EnablePersistence, all my data is rendered correctly on the grid.  Syncfusion, please investigate this.


RS Rajapandiyan Settu Syncfusion Team July 20, 2021 01:04 PM UTC

Hi Don,  
  
Thanks for contacting Syncfusion support.  
  
By analyzing your query, we suspect that you may include new Grid settings in your previous Grid. By default, when enablePersistence set to true, the browser maintains the previous persisted data of Grid in its cache. This may conflicts with newly added grid settings. If so, we suggest you to change the Grid’s element id with new value or clear the whole browser caches to resolve this. 
  
Still, if you face the same issue, share the below details to replicate the problem at our end.  
  
  1. Share the full Grid code files (index.cshtml).
  2. Share the Grid script version you have used.
  3. Share the video demo and screenshot of the reported behavior.
  4. If possible, share the issue reproducible sample or try to make the issue in the given sample.

Regards, 
Rajapandiyan S 


Loader.
Up arrow icon