jsgrid: LoadData does not work

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…

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 17 (5 by maintainers)

Most upvoted comments

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)).

tabalinas on Apr 21, 2016

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

angelomachado on Apr 11, 2016