This is a migrated thread and some comments may be shown as answers.

Grid data can't have numbers as column headers

4 Answers 472 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Christopher
Top achievements
Rank 1
Christopher asked on 02 Sep 2014, 12:48 PM

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

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 04 Sep 2014, 07:51 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Christopher
Top achievements
Rank 1
answered on 04 Sep 2014, 08:42 PM
Thank you, that explains the issue.
0
Nooruddin
Top achievements
Rank 1
answered on 21 May 2020, 06:20 AM

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

0
Alex Hajigeorgieva
Telerik team
answered on 22 May 2020, 08:53 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Christopher
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Christopher
Top achievements
Rank 1
Nooruddin
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or