Having trouble populating a kendo grid with column titles, as some columns appear empty despite having data when checked in the 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 how the table appears using this code:
The data seems to be present, but it's not displaying correctly in the kendo grid. However, if I remove the columns property, the entire dataset loads correctly.
$.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
});
})
Unable to customize column titles in this way. Any idea what could be causing the issue?