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?