I am constructing a dynamic Kendo UI grid with dynamic columns. It fails to render the data to the grid.
I am using ASP.NET Core webAPI which returns dynamic columns and its data.
I followed this article.
On my API call success event, I do the following logic:
onSuccess: function (readings) {
console.log(readings);
var myCoulmns = [];
var myFields = {}; // I am not using this
var model = generateModel(readings[0]);
readings.forEach(function (obj) {
for (key in obj) {
console.log(key + ': ' + obj[key]);
if (key === "Id") {
myCoulmns.push({
field: key,
title: key,
width: 240,
hidden: true
});
myFields["Id"] = { type: "number" };
}
else if (key === "RadioChannel") {
myCoulmns.push( {
field: "RadioChannel",
title: "Radio Channel",
width: 240
});
myFields["RadioChannel"]= { type: "string" };
}
else if (key === "Units") {
myCoulmns.push( {
field: "Units",
title: "Units",
width: 150
});
myFields["Units"] = { type: "string" };
} else {
myCoulmns.push( {
field: key,
title: getFormatedDate(key),
width: 200
//format: "{0:n}"
});
myFields[key] = { type: "number" };
}
}
});
$("#monitorReadingGrid").kendoGrid({
dataSource: {
schema: {
model: model
},
data: readings,
pageSize: 20
},
columns: myCoulmns,
height: 550,
scrollable: true,
sortable: false,
filterable: false,
//columMenu:true,
pageable: {
input: true,
numeric: false
}
});
//$("#montior-data").show();
}
Other functions
var isDateField = [];
function getFormatedDate(key) {
var day = key.substr(0, 2);
var month = key.substr(2, 3);
var year = key.substr(5, 4);
var hour = key.substr(9, 2);
var minute = key.substr(11, 2);
var tt = key.substr(13, 2);
return month + " " + day + ", " + year + " " + hour + ":" + minute + " " + tt;
}
function generateModel(dataItem) {
var model = {};
var fields = {};
for (var property in dataItem) {
if (property.indexOf("Id") !== -1) {
model["id"] = property;
}
var propType = typeof dataItem[property];
if (propType === "number") {
fields[property] = {
type: "number",
validation: {
required: true
}
};
if (model.id === property) {
fields[property].editable = false;
fields[property].validation.required = false;
}
} else if (propType === "boolean") {
fields[property] = {
type: "boolean"
};
} else if (propType === "string") {
var parsedDate = kendo.parseDate(dataItem[property]);
if (parsedDate) {
fields[property] = {
type: "date",
validation: {
required: true
}
};
isDateField[property] = true;
} else {
fields[property] = {
type: "string",
validation: {
required: true
}
};
}
} else {
fields[property] = {
validation: {
required: true
}
};
}
}
model.fields = fields;
return model;
}
Here's the data that is returned from the webAPI:
[
{
"Id":1000,
"RadioChannel":"0D_A1",
"Units":"Gs",
"22May20190522PM":-367.25849333773,
"22May20190521PM":-367.25849333773,
"22May20190520PM":-368.24099331991,
"22May20190519PM":-367.84799332704,
"22May20190513PM":0.0,
"22May20190509PM":-367.84799332704,
"22May20190502PM":-367.45499333417,
"22May20190501PM":-367.25849333773,
"22May20190500PM":-366.37424335377,
"22May20190459PM":-367.94624332526
},
{
"Id":1010,
"RadioChannel":"0D_S1",
"Units":"uStrain",
"22May20190522PM":-236.57619777032,
"22May20190521PM":-235.62476990612,
"22May20190520PM":-235.66136328552,
"22May20190519PM":-239.68663501865,
"22May20190513PM":0.0,
"22May20190509PM":-239.39388798352,
"22May20190502PM":-237.56421901391,
"22May20190501PM":-239.0279541896,
"22May20190500PM":-237.27147197877,
"22May20190459PM":-237.63740577269
},
{
"Id":1020,
"RadioChannel":"Channel 0_Monitoring Temperature",
"Units":"Degree Farenheit",
"22May20190522PM":81.0,
"22May20190521PM":81.0,
"22May20190520PM":81.0,
"22May20190519PM":81.0,
"22May20190509PM":80.0,
"22May20190502PM":81.0,
"22May20190501PM":81.0,
"22May20190500PM":81.0,
"22May20190459PM":81.0
},
{
"Id":1030,
"RadioChannel":"Channel 1_Monitoring Temperature",
"Units":"Degree Farenheit",
"22May20190522PM":81.0,
"22May20190521PM":81.0,
"22May20190520PM":81.0,
"22May20190519PM":81.0,
"22May20190509PM":80.0,
"22May20190502PM":81.0,
"22May20190501PM":81.0,
"22May20190500PM":81.0,
"22May20190459PM":81.0
},
{
"Id":1040,
"RadioChannel":"AFE 0_Model and SN",
"Units":"General",
"22May20190522PM":16777219.0,
"22May20190521PM":16777219.0,
"22May20190520PM":16777219.0,
"22May20190519PM":16777219.0,
"22May20190509PM":16777219.0,
"22May20190502PM":16777219.0,
"22May20190501PM":16777219.0,
"22May20190500PM":16777219.0,
"22May20190459PM":16777219.0
},
{
"Id":1050,
"RadioChannel":"Ambient Temp",
"Units":"Degree Farenheit",
"22May20190522PM":79.0,
"22May20190521PM":79.0,
"22May20190520PM":79.0,
"22May20190519PM":79.0,
"22May20190513PM":0.0,
"22May20190509PM":79.0,
"22May20190502PM":79.0,
"22May20190501PM":79.0,
"22May20190500PM":79.0,
"22May20190459PM":79.0
},
{
"Id":1060,
"RadioChannel":"Core Temp",
"Units":"Degree Farenheit",
"22May20190522PM":79.0,
"22May20190521PM":79.0,
"22May20190520PM":79.0,
"22May20190519PM":79.0,
"22May20190513PM":0.0,
"22May20190509PM":79.0,
"22May20190502PM":79.0,
"22May20190501PM":79.0,
"22May20190500PM":79.0,
"22May20190459PM":79.0
}
]
I get this error:
VM48006:3 Uncaught SyntaxError: Invalid or unexpected token
at Function (<anonymous>)
at getter (kendo.all.js:2067)
at Object.<anonymous> (kendo.all.js:6082)
at each (jquery.js:360)
at new init (kendo.all.js:6068)
at new init (kendo.all.js:6384)
at Function.re.create (kendo.all.js:7990)
at init._dataSource (kendo.all.js:60997)
at new init (kendo.all.js:57304)
at HTMLDivElement.<anonymous> (kendo.all.js:2449)
If I change data source (commend schema) then I get invalid template error, but I am not using any templates in the grid.
dataSource: {
//schema: {
// model: model
//},
data: readings,
pageSize: 20
},
