jsGrid calling Controller .Net Core - Cells not loading data - ajax

Question

Using jsGrid / .net core 2.2 / MVC I'm successfully returning data in my ajax call and logging to the console, but I can't figure out why the fields aren't populated?
My View
<div id="jsGrid"></div>
#section scripts {
<script>
$(function () {
$("#jsGrid").jsGrid({
height: "50%",
width: "100%",
filtering: true,
inserting: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 5,
//deleteConfirm: "Do you really want to delete client?",
controller: {
loadData: function () {
var d = $.Deferred();
$.ajax({
type: 'GET',
url: "/operator/GridJson",
dataType: "json",
success: function (data) {
d.resolve(data);
console.log('success ', data);
},
error: function (e) {
alert("error: " + e.responseText);
}
});
return d.promise();
}
},
fields: [
{ name: "OperatorId", type: "number", width: 50 },
{ name: "FirstName", type: "text", width: 150 },
{ name: "LastName", type: "text", width: 150 },
{ name: "LicenseNumber", type: "number", width: 50, filtering: false },
{ name: "RFIDNumber", type: "number", width: 50, filtering: false },
{ name: "DateCreated", type: "date", width: 50, filtering: false },
{ name: "LastUpdated", type: "date", width: 50, filtering: false },
{ name: "CompanyId", type: "number", width: 50 }
// { type: "control" }
]
});
console.log("test");
});
</script>
}
My Controller Method
[HttpGet]
public string GridJson()
{
List<OperatorDetail> operators = service.GetOperators();
string json = JsonConvert.SerializeObject(operators);
return json;
}
The Console log
(5) [{…}, {…}, {…}, {…}, {…}]
0: {OperatorId: 1, FirstName: "driver1", LastName: "driver1", LicenseNumber: 12345, RFIDNumber: 12345, …}
1: {OperatorId: 2, FirstName: "driver2", LastName: "driver2", LicenseNumber: 23456, RFIDNumber: 23456, …}
2: {OperatorId: 3, FirstName: "driver3", LastName: "driver3", LicenseNumber: 34567, RFIDNumber: 34567, …}
3: {OperatorId: 4, FirstName: "driver4", LastName: "driver4", LicenseNumber: 45678, RFIDNumber: 45678, …}
4: {OperatorId: 5, FirstName: "driver5", LastName: "driver5", LicenseNumber: 56789, RFIDNumber: 56789, …}
length: 5
__proto__: Array(0)

Answer 1

The reason is your loadData() async function returns before you get a response.
To fix that, change your loadData function to return a promise.
loadData: function(filter){
return $.ajax({
type:"GET",
url: "/operator/GridJson",
data:filter,
dataType:"JSON",
});
}
[Edit]
Actually, if you inspect the source with the F12 developer tool, you will find the fields rendered already. It turns out we also need change the height: "100%" as it will make those fields invisible.
Here's a complete list of a working sample:
$("#jsGrid").jsGrid({
width: "100%",
height: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 5,
//deleteConfirm: "Do you really want to delete client?",
controller: {
loadData: function(filter){
return $.ajax({
type:"GET",
url: "/book/index",
data:filter,
dataType:"JSON",
});
}
},
fields: [
{ name: "OperatorId", type: "number", width: 50 },
{ name: "FirstName", type: "text", width: 150 },
{ name: "LastName", type: "text", width: 150 },
{ name: "LicenseNumber", type: "number", width: 50, filtering: false },
{ name: "RFIDNumber", type: "number", width: 50, filtering: false },
{ name: "DateCreated", type: "date", width: 50, filtering: false },
{ name: "LastUpdated", type: "date", width: 50, filtering: false },
{ name: "CompanyId", type: "number", width: 50 }
// { type: "control" }
]
});
A demo:

Answer 2

I recently had the same issue recently and took me a while to find someone else to point it out to me, too. itminus has a good portion of the solution, but since you have Paging enabled, you need to return your data in a specific JSON object.
{
data: [{your list here}],
itemsCount: {int}
}
It's barely in the documentation, as it's inline and not very obvious. (Bolding mine.)
loadData is a function returning an array of data or jQuery promise that will be resolved with an array of data (when pageLoading is true instead of object the structure { data: [items], itemsCount: [total items count] } should be returned). Accepts filter parameter including current filter options and paging parameters when
http://js-grid.com/docs/#controller