CODEWITHSUNDEEP
kendo-uikendo-grid
Pat
Pat

Reputation: 11

Kendo Grid not showing data with proper json being returned

My kendo grid is not showing data after successfully calling a web method and seeing data being returned in the ajax request.

$(document).ready(function () {
  var filterSource = new kendo.data.DataSource({
    transport: {
      read: function (options) {
        $.ajax({
          type: "GET",
          url: "DoJo.aspx/GetProjects",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (msg) {
            // msg.d has the json data
          }
        });
      }

    },
    schema: {
      model: {
        fields: {
          ProjNum: {type: "string"},
          Stat: {type: "string"}
        }
      },
      data: "d"
    },
    change: function (e) {
      // e.items is empty
    }
  });


  $("#grid").kendoGrid({
    dataSource: filterSource,
    columns: [
      {
        field: "ProjNum", title: "Project Number", width: "130px", filterable: {
          multi: true,
          dataSource: filterSource
        }
      },
      {
        field: "Stat", title: "Status", filterable: {
          multi: true,
          dataSource: filterSource
        }
      }
    ]
  });
})

The JSON below is in an array format.

[{"ProjNum":"12345","Stat":null,"ProjTitle":"Test Title","ClientName":"Test Client","ClientContactName":"Test Name","ClientFacilityLocation":"Test Location","SourceOfContact":"Test Contact","ProjManager":"Test Manager","Department":"Test Department"}]

Why is change callback returning an empty e.items? If I remove data: "d" it returns e.Items with the JSON data.

Upvotes: 1

Views: 1228

Answers (1)

Joe Glover
Joe Glover

Reputation: 1026

When you set dataSource.transport.read to a function and invoke the ajax call yourself, you need to pass the result (or error) back into the dataSource, like so:

var filterSource = new kendo.data.DataSource({
  transport: {
    read: function (options) {
      $.ajax({
        type: "GET",
        url: "DoJo.aspx/GetProjects",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
          // msg.d has the json data
          // notify the data source that the request succeeded
          options.success(msg);
        },
        error: function(msg) {
          // notify the data source that the request failed
          options.error(msg);
        }
      });
    }
  },
  schema: {
    model: {
      fields: {
        ProjNum: { type: "string" },
        Stat: { type: "string" }
      }
    },
    data: "d"
  },
  change: function (e) {
    // e.items is empty
  }
});

See the documentation for more information.

Upvotes: 1

Related Questions