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.
Hello,
I am trying to bind Data to grid from my Webapi. but I am getting blank datagrid. Here is code for Data Grid
<div class="control-section">
<div class="control-wrapper">
<ejs-grid id="Grid1" allowPaging="true" actionFailure="actionFailure">
<e-grid-pageSettings pageCount="3"></e-grid-pageSettings>
<e-data-manager url="http://localhost:5001/api/Videos/GetVideosTest" crossdomain="true" adaptor="WebApiAdaptor"></e-data-manager>
<e-grid-columns>
<e-grid-column field="videoName" headerText="videoName" width="130" textAlign="Right"></e-grid-column>
<e-grid-column field="videoCategoryId" headerText="videoCategoryId" width="145"></e-grid-column>
<e-grid-column field="videoPath" headerText="videoPath" width="130"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
</div>
<script>
function actionFailure(args) {
var span = document.createElement('span');
this.element.parentNode.insertBefore(span, this.element);
span.style.color = '#FF0000'
span.innerHTML = 'Server exception: 404 Not found';
}
</script>
Here is my API code
[HttpGet]
public async Task<ActionResult<IEnumerable<Videos>>> GetVideosTest()
{
var queryString = Request.Query;
int skip = Convert.ToInt32(queryString["$skip"]);
int take = Convert.ToInt32(queryString["$top"]);
var subsubjetlist = _videosRepo.SelectAllByClause(includeProperties: "VideoCategories");
var totalRecords = subsubjetlist.Count();
return Ok(take != 0 ? new { Items = subsubjetlist.Skip(skip).Take(take).ToList(), Count = totalRecords } : new { Items = subsubjetlist.ToList(), Count = totalRecords });
}
and Here is the response from API
{
"items": [
{
"videoId": 2,
"videoCategoryId": 1,
"videoPath": "aaa",
"videoName": "Color Song",
"videoThumbnail": "",
"isActive": 1,
"videoCategories": null
},
{
"videoId": 3,
"videoCategoryId": 2,
"videoPath": "aaa",
"videoName": "Math Table",
"videoThumbnail": "",
"isActive": 1,
"videoCategories": null
},
{
"videoId": 6,
"videoCategoryId": 4,
"videoPath": "aaa",
"videoName": "Sea Animals",
"videoThumbnail": "",
"isActive": 1,
"videoCategories": null
},
{
"videoId": 9,
"videoCategoryId": 3,
"videoPath": "aaa",
"videoName": "Flowers",
"videoThumbnail": "",
"isActive": 1,
"videoCategories": null
},
{
"videoId": 14,
"videoCategoryId": 4,
"videoPath": "aaa",
"videoName": "ABC Animals",
"videoThumbnail": "",
"isActive": 1,
"videoCategories": null
},
{
"videoId": 16,
"videoCategoryId": 4,
"videoPath": "aaa",
"videoName": "Farm Animals",
"videoThumbnail": "",
"isActive": 1,
"videoCategories": null
},
{
"videoId": 17,
"videoCategoryId": 4,
"videoPath": "aaa",
"videoName": "Zoo Animals",
"videoThumbnail": "",
"isActive": 1,
"videoCategories": null
},
{
"videoId": 18,
"videoCategoryId": 4,
"videoPath": "aaa",
"videoName": "Addition with Animals",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 19,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "ABC Phonics",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 20,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Birds",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 21,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Cloths",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 22,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Common Signs",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 23,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Foods",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 24,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Months",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 25,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Kids Pubble",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 26,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Part of Hand",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 27,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Shapes",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 28,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "City Vehicle",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 29,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Number Song",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 30,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Subtraction",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 31,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Addition",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 32,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Fruits",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 33,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Numbers1-50",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 34,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Days",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 35,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Alphabets Songs",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 36,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Two Letters Words",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 37,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Vegetables",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 38,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Planets",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
},
{
"videoId": 39,
"videoCategoryId": 5,
"videoPath": "aaa",
"videoName": "Fire Vehicle",
"videoThumbnail": null,
"isActive": 1,
"videoCategories": null
}
],
"count": 29
}
And can I bind the response from below api code to Datagrid
[HttpGet]
public async Task<ActionResult<IEnumerable<Videos>>> GetVideos()
{
var subsubjetlist = _videosRepo.SelectAllByClause(includeProperties: "VideoCategories");
var totalRecords = subsubjetlist.Count();
return Ok(new { data = subsubjetlist, recordsTotal = totalRecords, recordsFiltered = totalRecords });
}
Please let me know where I am wrong in that.
Thanks
Hi Gulab Chand Tejwani,
Thanks for contacting Syncfusion support.
The reported case issue is occurring due to the serialization problem in the ASP.NET Core where it returns the JSON results in camelCase format by default, because of which the data source field names would be returned in camelCase whereas the columns fields are in PascalCase. The column field names are case-sensitive and since the names do not match, the data was not getting displayed in the Grid.
This is a general issue in the Core platform, and you can resolve this problem by serializing and returning them in the PascalCase format using the below code in the startup.cs file of the application,
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();
}
|
Kindly get back to us if you need further assistance on this.
Regards,
Pavithra S
That I have already placed code in my Web App. Even After that getting same issue. What other things might effect on that?
From the shared API response, we could see that the issue occurs from the Core application only. It is not related to the Syncfusion Grid component. We suspect that the issue is due to the Serialization issue. So please refer to the below reference links to overcome the reported issues.
http://www.binaryintellect.net/articles/a1e0e49e-d4d0-4b7c-b758-84234f14047b.aspx
https://stackoverflow.com/questions/70577301/camelcase-not-working-in-net-core-6-web-api
