Jsgrid: LoadData does not work

[Utach]

Hi, I am new in jquery... I have been struggled to deal with loadData in jsgrid....
I am using Webform instead of MVC...

Here my code on aspx

$("#jsGrid").jsGrid({
        height: "auto",
        width: "100%",
        sorting: true,
        paging: false,
        autoload: true,
        controller: {
            loadData: function (filter) {
                return $.ajax({
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    url: "JsGridTesting.aspx/GetDataJSON",
                    dataType: "json"
                });
            }
        },
        fields: [
            { name: "Name", type: "text" },
            { name: "Description", type: "text", width: 150 }
        ]
    });

and here is my code on server side

<System.Web.Services.WebMethod()> _
   <ScriptMethod(ResponseFormat:=ResponseFormat.Json, UseHttpGet:=True)>
    Public Shared Function GetDataJSON() As String

        Dim obj1 As New Student() With {.Name = "Mick Jagger", .Description = "bar"}
        Dim obj2 As New Student() With {.Name = "Johnny Storm", .Description = "bar"}
        Dim obj3 As New Student() With {.Name = "Richard Hatch", .Description = "bar"}
        Dim obj4 As New Student() With {.Name = "Kelly Slater", .Description = "bar"}

        Dim objStudentList As New List(Of Student)() From {obj1, obj2, obj3, obj4}
        Dim objJSSerializer As New System.Web.Script.Serialization.JavaScriptSerializer()
        Dim strJSON = objJSSerializer.Serialize(objStudentList)

        Return strJSON
   End Function

I have checked that my GetDataJSON has return JSON data correctly but the grid cannot bind the data properly...... Please help me....

[angelomachado]

Hey! I think loadData expects a promise. Something similar to this should work.

$("#jsGrid").jsGrid({
  height: "auto",
  width: "100%",
  sorting: true,
  paging: false,
  autoload: true,
  controller: {
    loadData: function (filter) {
     var data = $.Deferred();
     $.ajax({
       type: "GET",
       contentType: "application/json; charset=utf-8",
       url: "JsGridTesting.aspx/GetDataJSON",
       dataType: "json"
       }).done(function(response){
         data.resolve(response);
     });
      return data.promise();
    }
  },
  fields: [
    { name: "Name", type: "text" },
    { name: "Description", type: "text", width: 150 }
  ]
});

[tabalinas]

In fact there should not be difference between returning $.ajax and returning a promise. But for debug purposes I would suggest you using @geloh's example. Put a debugger; in the done of ajax and ensure you get inside. Also ensure that response has valid format. As I remember (not sure though) the response have a field value (or something like that) when you use Page methods. In this case you indeed need to resolve promise with array of items like: data.resolve(response.value).

[Utach]

Hi Geloh and Tabalinas,
I use your examples, but it's still not work.... I put a debugger too, but nothing happen..
Could you please give more example of getting data from webservice, I want to see the server code returning json data. Please help

[tabalinas]

Ensure your ajax request works separately:

$.ajax({
       type: "GET",
       contentType: "application/json",
       url: "JsGridTesting.aspx/GetDataJSON"
       }).done(function(response){
         console.log(response);
     });

Be sure that expected result is printed in the console.
Just in case: you need to open Chrome DevTools to see the console.

[Utach]

This is the result...
the "JsGridTesting.aspx/GetDataJSON" returns the correct object, right ?
But, on the grid, there is still no data...

[tabalinas]

No, as you can see your response is not an array of objects, but an object with a field d where all data is just a string that you should parse. So in this case it should be at least data.resolve(response.d) or even data.resolve(JSON.parse(response.d)).

[Utach]

Woow, it perfectly works... you are great
Many thanks @tabalinas

[tabalinas]

You are welcome!

[KarlaGonzalez]

It works for me too, thanks @tabalinas and @Utach !!

[vohoangnhut]

Wow. It's really helpful. thank @tabalinas

[JTC1701]

@tabalinas -- How should the JSON array be structured? I have tried everything that has been suggested and still cannot get anything to display when using the loadData controller.

Here is my script:
loadData: function (filter) {
return $.ajax({
method: "GET",
url: "/api/sbom",
contentType: "application/json",
dataType: "json",
data: filter
}).done(function(response){
console.log(response);
});
},

And here is the result as it shows in the Console:

[tabalinas]

@JTC1701, My guess is the grid loaded just fine, but it collapsed because of height: "100%". Try to set fixed in pixels value to be sure.

[Venkatramanaryams]

hello sir tabalinas iam using jsgrid from last one week.please help about json object fetch into controller.Iam using JAVA so i used jsgrid like.grid.jsp file.Please help me

[Venkatramanaryams]

@Utach can u send me that jsgrid code

[Venkatramanaryams]

@tabalinas and @Utach hello sir tabalinas iam using jsgrid from last one week.please help about json object fetch into controller.Iam using JAVA so i used jsgrid like.grid.jsp file.Please help me

[sbwilso7]

I encountered this identical problem when using ASP.NET WebForms. After spending way too much time tinkering around with it, I discovered that if you're using a WebMethod in your ajax call instead of a generic handler, you will need to use type: "post"

Here's my working solution to this:

        controller: {
            loadData: function (filter) {
                var data = $.Deferred();
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: url,
                    dataType: "json"
                }).done(function (response) {
                    data.resolve(JSON.parse(response.d));
                });
                return data.promise();
            }
        },

[bmtsoykan]

@tabalinas Hi,
I also faced similar issue with @JTC1701 .
In my console, the result array appered. But I couldn't display it. Could you please help me?