Cannot populate datasource

[AP]

I have a grid that I want to populate from data returned from an ajax request.

The data is returned as part of the Ajax response, but is not displayed in the grid.

My code is:-

$.ajax({
               type: "POST",
               async: true,
               contentType: "application/json;charset=utf-8",
                url: "@Url.Content("~/Dynamic/CompareTables")",
               data:'{"tab1":"' + t1 + '","tab2":"' + t2 + '","link1":"' + l1 + '","link2":"' + l2 + '","CompDesc":"' + desc + '"}',
               dataType: "json",
               success: function (data) {
                   if (data.Success == true) {
                       alert(data.Message);


                       //Create grid from data

                        var fMatches = new kendo.data.DataSource({ data: data.FieldMatches });


                        fMatches.read();


                       $("#fieldCompGrid").kendoGrid({
                       dataSource: {
                           data: fMatches,
                           schema: {
                               model: {
                                   fields: {
                                       FieldName: { type: "string" },
                                       FieldTypeMatch: { type: "boolean" },
                                       MatchFound: { type: "boolean" },
                                       MaxLengthMatch: { type: "boolean" },
                                       PrecisionMatch: { type: "boolean" },
                                       OutputHeader: { type: "string" },
                                       Output: { type: "string" },
                                        CanBeCompared: { type: "boolean" }
                                   }
                               }
                           },
                           pageSize: 20
                       },
                       height: 550,
                       scrollable: true,
                       sortable: true,
                       filterable: true,
                       pageable: {
                           input: true,
                           numeric: false
                       },
                       columns: [
                           "FieldName",
                           { field: "FieldTypeMatch", title: "Type Match" },
                           { field: "MaxLengthMatch", title: "Max Length Match", width: "130px" },
                           { field: "CanBeCompared",  title: "Can Be Compared" }
                       ]
                   });





                       //show div
                       $('#resultsDiv').show();


                       //$("#Grid").data("kendoGrid").dataSource.read();

                       $('#compBtn').show();
                       $('#imgWait').hide();




                   }
                   else {

                       $('#imgWait').hide();
                       alert(data.Error);
                      $('#compBtn').show();

                   }


               }
               ,
               error: function () {
                  $('#imgWait').hide();
                   alert("An error has occurred.");
                    $('#compBtn').show();
               }
           });

How can I get this working?

Thanks

[Alex Hajigeorgieva]

Hi, Andrew,

The reason this is happening is because the data source data should be an array and right now it is a  data source instance:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/data

I would suggest one of the following:

• declare a separate data source and assign that to the grid so you can share it. Calling the read() method will trigger all the widgets sharing the data source
  

• declare the data source read url and data as part of the grid definition instead of making a custom request

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.read

Whether the data source is separate or part of the grid definition, it would resemble the following configuration:

- schema.data: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/schema#schema.data

- transport.read.data: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.read#transportreaddata

dataSource: {
          transport:{
            read:{
              url: "@Url.Content('~/Dynamic/CompareTables')",
              data: function(){
                return {
                  tab1: t1,
                  tab2: t2,
                  link1:l1,
                  link2: l2,
                  CompDesc: desc
                }
              },
              type: "POST"
            }
          },
          schema: {
            data: "FieldMatches",
            model: {
              fields: {
                FieldName: { type: "string" },
                FieldTypeMatch: { type: "boolean" },
                MatchFound: { type: "boolean" },
                MaxLengthMatch: { type: "boolean" },
                PrecisionMatch: { type: "boolean" },
                OutputHeader: { type: "string" },
                Output: { type: "string" },
                CanBeCompared: { type: "boolean" }
              }
            }
          },
          pageSize: 20
        },

• finally, the alternative would be to assign the array to the data source data instead:

            success: function (data) {
                   if (data.Success == true) {
                       alert(data.Message); 
 
                 $("#fieldCompGrid").kendoGrid({
                       dataSource: {
                           data: data.FieldMatches,
                           schema: {

Let us know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[AP]

Thanks. I should have spotted that.