This is a migrated thread and some comments may be shown as answers.

Cannot populate datasource

2 Answers 34 Views
Grid
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Veteran
AP asked on 28 Oct 2019, 03:36 PM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 30 Oct 2019, 02:47 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
AP
Top achievements
Rank 1
Veteran
answered on 31 Oct 2019, 11:41 AM
Thanks. I should have spotted that.
Tags
Grid
Asked by
AP
Top achievements
Rank 1
Veteran
Answers by
Alex Hajigeorgieva
Telerik team
AP
Top achievements
Rank 1
Veteran
Share this question
or