jsGrid loadData does not work

Question

I use Ajax to load data into the jsGrid.

I have the following code:

$("#jsGrid").jsGrid({
    width: "100%",
    height: "100%",

    autoload:   true,
    paging:     true,
    pageSize:   15,
    pageButtonCount: 5,
    pageIndex:  1,

    controller: {
        loadData: function(filter) {
            var d = $.Deferred();
            $.ajax({    url: "/api/index.php/get_data",
                        contentType: "application/json; charset=utf-8",
                        data: {a:(filter.page?filter.page:0)},
                        dataType: "json"
                    }).done(function(response){
                        console.info(response);
                        d.resolve(response);
                    });
            return d.promise();
        }
    },
    fields: [
        { name: "ID", type: "number", width:50 },
        { name: "platform", type: "text", width: 100 },
        { name: "title", type: "text", width: 150 },
        { name: "url_image", type: "text", width: 200 },
        { name: "url", type: "text", width: 200 },
        { name: "cost", type: "text", width: 50 }
    ]
});

});

The ajax call returns an array of objects but it does not populate in the table.

What's wrong?

Answer 1

The ajax call returns an array of objects but it does not populate in the table.

What's wrong?

First: ajax is by itself a promise, so you may return itself.

Second: height: "100%",: this will set the height to a little value (on my computer the value of ".jsgrid-grid-body" is only 3px!!!). You may use the default value or set another one.

The snippet:

$("#jsGrid").jsGrid({
  width: "100%",
  height: "auto",

  autoload:   true,
  paging:     true,
  pageSize:   5,
  pageButtonCount: 5,
  pageIndex:  1,

  controller: {
    loadData: function(filter) {
      return $.ajax({
        url: "https://api.github.com/repositories",
        dataType: "json"
      });
    }
  },
  fields: [
    {name: "name", width: 50},
    {name: "full_name", width: 100}
  ]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>


<div id="jsGrid"></div>

Answer 2

On my case I noticed that I could do the method to get the data like this:

$.post(
       'getData.php',
        {
         //parameters here
        })
         .done(function(data){
         var dataArray = JSON.parse(data);
         $("#jsGrid").jsGrid({
          width: "100%",
          height: "400px",
           
          inserting: true,
          editing: true,
          sorting: true,
          paging: true,
           
          data: dataArray,
           
           fields: [
                   { name: "dbfield1", type: "text", width: 50, title: "textOnColumnHere1" },
                   { name: "dbfield2", type: "text", width: 100,title: "textOnColumnHere2" },
                   { name: "dbfield3", type: "text", width: 50,title: "textOnColumnHere3" },
                   { name: "dbfield4", type: "text",width: 100,title: "textOnColumnHere4" },
                   { type: "control" }
                  ]
                  
               });//jsgrid
    });//$.post

It's important to know your data, for example my json array had the format shown below, if you know the names put them on name, and put the column header you want on column on title, hope this helps someone.

[{
  dbfield1: 1,
  dbfiled2: "John",
  dbfield3: 25,
  dbfield4: "Canada"
  },
  {n row...with same fields}
  {n+1 row...with same fields}
 ]