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?

Buddy, I already had that issue but I can't reproduce it neither remember the solution. But the little I recall is something about the object you pass to the dataSource, in your case result object. Make sure it is a javascript object and not string or something like (even noticing that you have added contentType: "application/json"). Perhaps if you try using it as { data: result } and define your schema.data: "data" just to help kendo understando your data. This issue sucks and it happens since forever, I'm afaid they will never fix it. — DontVoteMeDown

Vidiya Prasanth Pappannan Vidiya Prasanth Pappannan · Accepted Answer · 2017-08-09T22:38:39

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

Kendo Grid: populating with data from ajax

2 Answers