Kendo Grid not displaying all data /columns

Question

I am trying to populate this kendo grid but I am running into some issues. When I give titles to the columns, some of the columns are empty but the data is there since I can see when I am printing it in console log.

$(function () {
  $("#uploadBtn").click(function () {
    var url = window.rootUrl + 'Upload/UploadM';
    var fileUpload = $("#fileID").get(0);
    var files = fileUpload.files;
    var data = new FormData();
    data.append(files[0].name, files[0]);

    $.ajax({
      url: url,
      type: "POST",
      contentType: false, // Not to set any content header
      processData: false, // Not to process data
      data: data
    }).done(function (res) {
      console.log("dataTable", res)
      $('#AttachGrid').empty();
      $("#AttachGrid").kendoGrid({
        columns: [
          { field: "DATA_CATEGORY_QOS_CODE", title: "QOS" },
          { field: "DOWNLOAD_SPEED_CLASS_CODE", title: "download" },
          { field: "OPERATOR_OBJECTID", title: "operator" },
          { field: "SETTLEMENT_CODE", title: "settlement" },
          { field: "SHAPE", title: "shape" },
          { field: "TECHNOLOGY_CODE", title: "tech" },
          { field: "UPLOAD_SPEED_CLASS_CODE", title: "upload" },
          { field: "Message", title: "message" }
        ],
        dataSource: res.Data
      });
    })
  });
});

this is what the table looks like with this code

so the data is there but it's not populating the kendo grid correctly. However, is I do it like this without the columns property, it loads the entire data in the kendo grid.

$.ajax({
      url: url,
      type: "POST",
      contentType: false, // Not to set any content header
      processData: false, // Not to process data
      data: data
    }).done(function (res) {
      console.log("dataTable", res)
      $('#AttachGrid').empty();
      $("#AttachGrid").kendoGrid({
        
        dataSource: res.Data
      });
    })

I can't add custom column titles like this. What could the issue be?

Answer 1

It's obvious..... Your json Data 's property names do not match columns field.

Json is DATA_CATEGORY_QOS_OBJECTID but field is DATA_CATEGORY_QOS_CODE , so kendo ui will not match correctly........

Other property/field is the same problem~