Loading jsGrid by calling Controller / WebService in MVC

Question

I am really trying to load jsGrid using the Controller service. I can’t do it right.

I even tried the sample code from the jsGrid demo page, but that didn't work either, or it throws an error in! this.data.length or the grid does not load at all.

I do not get any data every time I try to use the code below.

Appreciate if anyone can help.

This is how jsGrid loads:

$(element).jsGrid({ height: 300, width: "100%", filtering: true, sorting: true, paging: true, autoload: true, pageLoading: true, controller: { loadData: function (filter) { $.ajax({ type: "GET", url: "../Common/GetData", data: filter, dataType: "JSON" }); } }, pageSize: 10, pageButtonCount: 5, pageIndex: 1, noDataContent: "No Record Found", loadIndication: true, loadIndicationDelay: 500, loadMessage: "Please, wait...", loadShading: true, fields: [ { name: "Name", type: "textarea", width: 150 }, { name: "Age", type: "number", width: 50 }, { name: "Address", type: "text", width: 200 }, { name: "Country", type: "select" }, { name: "", type: "text", width: 50, sorting: false, filtering: false, itemTemplate: function (value) { return '<div class="edit-container"><a class="edit-custom-field-link">Edit</a><div class="sort-icon-container"><div class="up-arrow-icon"></div><div class="down-arrow-icon"></div></div></div>'; } } //{ name: "Married", type: "checkbox", title: "Is Married", sorting: false } //,{ type: "control" } ] }); 

Answer 1

You must use promises when loading data,

 loadData: function(filter) { return $.ajax({ type: "GET", url: "../Common/GetData", data: filter, dataType: "JSON" }) } 

---

return $.ajax({}) returns the promise. thank you

Answer 2

I also had problems with JSGrid. I used the following snippet (as some suggested):

"

 loadData: function(filter) { console.log("LoadData called....") var d = $.Deferred(); $.ajax({ type: "GET", url: "/secure/msgitems", data: filter }).done(function(response) { console.log( response); d.resolve(response); return; }); return d.promise(); }, }, 

''

'I could see the results coming back, but my jsGrid continued to vomit. It turns out that the server should return data in the following format:

{
data: [items], itemsCount: amountOfItems }

This is where the developer discusses this topic: https://github.com/tabalinas/jsgrid/issues/35

It seems to work ... FWIW

Answer 3

To return the promise, try this code for loadData:

  loadData: function() { var d = $.Deferred(); $.ajax({ type: 'GET', url: '../Common/GetData', dataType: "json", success: function (data) { d.resolve(data); }, error: function(e) { alert("error: " + e.responseText); } }); return d.promise(); }