Kendo Grid: populating with data from ajax

Question

I'm trying to populate a kendo grid with data retrieved via ajax. Here is the ajax:

    var model = @Html.Raw(Json.Serialize(Model));

            $(document).ready(function () {

                $.ajax({
                    url: "/Utilities/Report/Run",
                    data: JSON.stringify(model),
                    contentType: "application/json",
                    type: "POST",
                    success: function(result) {
                        var ds = new kendo.data.DataSource({
                            data: result
                        });
                        alert(result);
                        $("#grid").data("kendoGrid").setDataSource(ds);
                    },
                    error: function(result) {
                        options.error(result);
                    }
                });

                $("#grid").kendoGrid({
                    toolbar: ["excel", "pdf"],
                    excel: {
                        fileName: "test"
                    },
                    pdf: {
                        fileName: "test"
                    },
                });
            });

At the alert(result) this is what the data looks like:

[
  {"TEST":"one"},
  {"TEST":"two"},
  {"TEST":"three"}
]

The ajax call appears to be working and the data looks good to me, but the kendo grid is not updating, it remains blank. I also do not get any error. I've tried placing the kendoGrid inside the ajax success function with the same result. I've tried using transport and read in the DataSource to retrieve the data but that kept giving me an error: n.slice is not a function. However, others seemed to think that was because there was no schema defined. Due to the kind of data I am retrieving, I cannot define this. The data retrieved from the server could have any column/field names, and any number of columns. It is not complex JSON however.

How do I get my grid to populate with this data?

Answer 1

Kendo DataSource is very powerful. Ideally, you do not need to make a manual Ajax call. Instead, DataSource can Ajax request data from URL by itself, if Grid needs data.

https://jsfiddle.net/6gxqsrzu/

$(function() {
  var dataSource = new kendo.data.DataSource({
    type: "odata",
    transport: {
      read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
    },
    schema: {
      model: {
        fields: {
          OrderID: {
            type: "number"
          },
          Freight: {
            type: "number"
          },
          ShipName: {
            type: "string"
          },
          OrderDate: {
            type: "date"
          },
          ShipCity: {
            type: "string"
          }
        }
      }
    },
    serverPaging: true,
    pageSize: 5,
    serverSorting: true,
    sort: {
      field: 'OrderDate',
      dir: 'asc'
    }
  });

  $("#grid").kendoGrid({
    dataSource: dataSource,
    sortable: true,
    pageable: true,
    columns: [{
        field: "OrderID",
        filterable: false
      },
      "Freight", {
        field: "OrderDate",
        title: "Order Date",
        format: "{0:MM/dd/yyyy}"
      }, {
        field: "ShipName",
        title: "Ship Name"
      }, {
        field: "ShipCity",
        title: "Ship City"
      }
    ]
  });
});

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<div id="grid"></div>

Answer 2

I have created a new Datasource and mapped it to the existing one outside the success method. Can you try this one below :

  var newDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Utilities/Report/Run",
                dataType: "json",
                data: JSON.stringify(model),

                error: function (result) {
                    options.error(result);
                }
            }
        }
    });

   var d1 = $("#grid").data("kendoGrid");
   d1.dataSource.data([]);
   d1.setDataSource(newDataSource );

make changes as per your necessity if I have missed any . Kendo data binding is always confusing :D