Kendo UI Grid not working

Question

I have a grid that binds data from a DataSource but It doesn’t shows the data, I can see the data coming from the server but the grid keeps empty, this is my code:

var dts = new kendo.data.DataSource({
  type: "json",
  serverPaging: true,
  pageSize: 20,
  group: { field: 'ProductType' },
  transport: {
    read: {
      url: "http://someurl.com", // the remove service url
      dataType: "json" ,// JSONP (JSON with padding) is required for cross-domain AJAX
      type: "GET", 
    },
  parameterMap: function(options) {
    return {
      //Some parameters
      };
    }
  }    
});

var grid = $("#grid").kendoGrid({
  dataSource: dts,
  navigatable: true,
  sortable: true,
  audoBind: false,
  height: 240,
  pageable: false,
  scrollable: false,
  columns: [
    {
      field: "SKU",
      width: 100,
      title: "SKU"
    }, {
      field: "ItemDescription",
      width: 150,
      title: "DescriptionDescription"
    }, {
      field: "Quantity",
      width: 80,
      title: "QTY"
    }, {
      field: "UOM",
      width: 80,
      title: "UOM"
    }, {
      field: "UnitPrice",
      width: 130,
      title: "UnitPrice",
      format: "{0:c}"
    }, {
      field: "Tax",
      width: 80,
      title: "Tax",
      format: "{0:c}"
    }, {
      field: "Total",
      width: 80,
      title: "Total",
      format: "{0:c}"
    }
  ]
}).data("kendoGrid");

dts.read();

This is my code, first I create the Datasource “dts” and then I create the Grid “grid” and at the end, I call the read function “dts.read()”. The DataSource reads the data from the server, but it is not shown on the Grid.

Any help will be appreciated!

Answer 1

There might be some issue with your dataSource, Because i am not able to reproduce this issue with kendo UI's service.

<script>

var dts = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
        dataType: "jsonp" ,
    },
    schema: {
        model: {
            fields: {
                OrderID: { type: "number" },
                Freight: { type: "number" },
                ShipName: { type: "string" },
                OrderDate: { type: "date" },
                ShipCity: { type: "string" }
            }
        }
    },
    pageSize: 10
});

var grid = $("#grid").kendoGrid({
    dataSource: dts,
    navigatable: true,
    sortable: true,
    audoBind: false,
    height: 240,
    pageable: false,
    scrollable: false,
    columns: [{
        *field: "ShipName",
        width: 100,
        title: "ShipName"
    }, {
        field: "OrderID",
        width: 80,
        title: "OrderID",
        format: "{0:c}"
    }]
}).data("kendoGrid");
dts.read();

Please also check below link for demo.

http://jsfiddle.net/jayeshgoyani/KZRfV/