构建动态剑道网格时模板无效

Question

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
},

Answer 1

Problem is with your JSON data property names [{"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}]

if you change your property names to start with string instead of digits, then all your code works.

22May20190520PM => May2220190520PM