Loading jsGrid by calling Controller/WebService in MVC

Question

Am really struggling to load the jsGrid using Controller service. Am not able to do it correctly.

I even tried the sample code from the jsGrid site demo but that too didn't work either it throws error at !this.data.length or grid doesn't load at all.

I get no data every time I try using below code.

Appreciate if anyone can help.

This is how am loading the jsGrid:

$(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" }
    ]
});

Don't forget to use: autoload: true , if not loadData won't be called — mauronet, Nov 16 '17 at 15:59

irfan · Accepted Answer · 2019-08-22T14:11:35.583

8

You should use promises while loading data,

loadData: function(filter) {

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

}

return $.ajax({}) does return a Promise. thank you

edited Aug 22 '19 at 14:11

answered Feb 27 '16 at 12:10

irfan

618
4
6

Is it possible to load jsGrid using pageLoading=true option, coz the way it accepts the parameter is loadData: function(filter) { return { data: (want to use service call), itemsCount: (use service call object)}. not sure how to bind service call with data object – Joshua I Feb 27 '16 at 14:12
4

DID THIS ACTUALLY WORK? I cannot get the grid to load I just get the grid coming up and saying 'not found' even though I can see my JSON being requested and sent back and I have console logging in all my events and they do appear.. This is so very frustrating because I cannot work out how to debug it. When I step through the underlying JQuery code it doesn't make nay sense to me. AAAARRRRRGGH! – Nick.Mc Apr 02 '16 at 12:58
Similar code here: http://stackoverflow.com/questions/35907482/data-not-populating-the-table-created-using-jsgrid – Nick.Mc Apr 02 '16 at 13:00
I've posted in the other question the code that finally worked for me..... just returning $.ajax directly. – Nick.Mc Apr 02 '16 at 13:21
@irfan `return $.ajax({})` DOES return a Promise – MattSizzle May 26 '16 at 18:07

score 6 · Answer 2 · answered Nov 11 '16 at 15:10

I too was having problems with JSGrid. I was using the following snippet (as some have 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 kept puking. It turns out the server must return the data in the following format:

{ data: [items], itemsCount: amountOfItems }

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

It seems to work...FWIW

This actually works really well, and it allows you to handle the `fail()` as well as `done()` giving you the choice to handle that and alert the user / handle the error. — nulltron, Jul 24 '19 at 17:59

score 0 · Answer 3 · answered Jun 14 '16 at 22:16

To return a 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();
        }

Loading jsGrid by calling Controller/WebService in MVC

3 Answers3