Data not populating a table created with jsgrid

Question

I am using jsgrid to create an editable table. I used the code from demo . The only difference is that im uses mvc instead of web api.

Looking at the network, the controller returns the necessary json data, and jsgrid also shows the pagination material at the bottom of the table. However, the table is not populated.

Here is the html and javascript code

<div id="jsGrid"></div> @section scripts { <script src="http://js-grid.com/js/jsgrid.min.js"></script> <script> $("#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 (filter) { return $.ajax({ type: "GET", url: "get", data: filter, dataType: "json" }); }, insertItem: function (item) { }, updateItem: function (item) { }, deleteItem: function (item) { } }, fields: [ { name: "SKU", type: "text", width: 50 }, { name: "PartNumber", type: "text", width: 100 }, { name: "ProductLineName", type: "text", width: 50 }, { name: "ProductLineId", type: "text", width: 50 }, { name: "Deleted", type: "checkbox", sorting: false }, { type: "control" } ] }); </script> 

Here is the appropriate method in the controller

  public async Task<ActionResult> Get() { var query = db.Products .Select(p => new ProductDto() { PartNumber = p.PartNumber, SKU = p.SKU, ProductLineName = p.ProductLines.ProductLineName, ProductLineId = p.ProductLineId, Deleted = p.Deleted }); var products = await query.ToListAsync(); return Json(products, JsonRequestBehavior.AllowGet); } 

Does anyone know what I can do to display / link the returned data to a table?

Answer 1

Modify the loadData call because it does not indicate what to do when the ajax call is made.

Try rewriting it as shown below:

 controller: { loadData: function() { var d = $.Deferred(); $.ajax({ url: "get", dataType: "json", data: filter }).done(function(response) { d.resolve(response.value); }); return d.promise(); } }, 

Answer 2

This is the client side javascript that I used that finally put some data into the grid: (only part of the controller)

  controller: { loadData: function (filter) { console.log("1. loadData"); return $.ajax({ type: "GET", url: "/Timesheet/GetTimesheet/", dataType: "json", data: filter console.log("3. loadData complete"); } 

None of the published explicit promise codes functioned at all. Obviously, $ .ajax returns a promise.

and this was my MVC controller code that I called using ajax (C #):

  public async Task<ActionResult> GetTimesheet() { int id = Convert.ToInt32(Session["UID"]); var tl = ( from ts in db.Tasks orderby ts.Task_Date descending where ts.Emp_ID == id select new { ID = ts.Task_ID, Date = ts.Task_Date, Client = ts.Customer_ID, Hours = ts.Total_Hours } ).Take(4); var jsonData = await tl.ToListAsync(); return Json(jsonData, JsonRequestBehavior.AllowGet); } 

There are no real examples of the required Json for jsGrid. everywhere, but it worked for me - don't mark the headlines or anything else.