Grid data can't have numbers as column headers

[Christopher]

I'm trying to get a Kendo UI Grid working with AngularJS and a sample of data. I am encountering a generic "Error: Invalid template" error when the grid attempts to display the data. The data I am using is:

$scope.dataSource.data = [
        {
            "874": " ",
            "878": "Example1",
            "882": "Example2",
            "884": "4",
            "885": "Example 4",
            "886": "in",
            "_id": {
                "$oid": "eaa1e4b0a8480579f79e"
            },
            "ID1": "46237",
            "ID2": "",
            "ID3": "",
            "ItemType": "Line",
            "ItemName": "Example 6"
        }
    ]

I know it's throwing the error on the columns with numbers as headers, because when I take out those columns it works just fine. Also, if I swap those column headers out for letter values, it also renders correctly.

Is this a known issue with the Kendo UI Grid or is there a workaround? I know the data I will be displaying will have numbers as headers often.

Cheers

[Dimo]

Hello Christopher,

The DataSource fieldnames must be valid Javascript identifiers.

http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.field

It is possible to configure the Grid dataSource and columns as shown below, which will partially resolve the problem, but editing will not be supported.

HTML

<div id="grid"></div>

JS

var sampleData = [
    {"1": 1, "2": 1},
    {"1": 2, "2": 2},
    {"1": 12, "2": 14}
];

$(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
        data: sampleData,
        pageSize: 10,
        schema: {
            model: {
                fields: {
                    '["1"]': { type: "number" },
                    '["2"]': { type: "number" }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        sortable: true,
        filterable: true,
        columns: [
            {field: '["1"]', title: "one"},
            {field: '["2"]', title: "two"}
        ]
    });
});

Regards,
Dimo
Telerik

 

 

[Christopher]

Thank you, that explains the issue.

[Nooruddin]

Hi Dimo,

I am encountering the similar problem and get error with suggested approach.

Can you please help.

I am getting following error

Uncaught TypeError: e.charAt is not a function
    at Object.expr (kendo.all.js:2047)
    at getter (kendo.all.js:2062)
    at init._accessors (kendo.all.js:28055)
    at init (kendo.all.js:28429)
    at new init (kendo.all.js:33400)
    at Object.ve.initWidget (kendo.all.js:2317)
    at i (kendo.all.js:9041)
    at s (kendo.all.js:9521)
    at s (kendo.all.js:9568)
    at Object.a [as bind] (kendo.all.js:9583)

 

code Snippet:

'columns': [{                      
                            'field' : '["1App"]',                                                      
                            'title': '1App',
                            'editable': () => { return false },

Regards

Nooruddin

[Alex Hajigeorgieva]

Hello, Nooruddin,

Thank you for the provided runnable example in another thread, however please refrain from posting multiple tickets.

When the proposed syntax from Dimo is used, the grid that you are referring to also works as expected:

https://dojo.telerik.com/@bubblemaster/UkibecIg

Kind Regards,
Alex Hajigeorgieva
Progress Telerik