KendoGrid JavaScript runtime error: Invalid template

Question

Trying to figure out the Kendo world and having an issue with a grid set to a json array datasource.

Error is "JavaScript runtime error: Invalid template: <tr
data-uid="#=data.uid#" role='row'><td  role='gridcell'>#=data.Account
Num==null?'':data.Account Num#</td>...".

I notice that in this error I see nulls, wondering if that means the data didn't bind?

I am seeing the column headers however, just not any rows. I must mention as well, I don't have any ID fields in my data as I'm using a temp table from a SQL view.

function populateGrid(search) {
    $("#grdAttributes").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: "http://127.0.0.2:6080/arcgis/rest/services/WW/WW2/MapServer/exts/RestSOE/Search%20Query?columnName=" + search.columnName + "&operand=" + search.operand + "&searchVal=" + search.searchVal + "&f=",
                    dataType: "json",
                    type: 'GET'
                }
            },
        },
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        scrollable: true,
        height: 150

    });
    $("#grdAttributes").data().kendoGrid.dataSource.view()
};

If I continue through the error in VS2012 I do see the column headers in the grid. Just no row data. (sample JSON below:)

 -[{
     -"Address": "PO BOX 20",
     -"City": "HAVENWOOD",
     -"Location": "",
     -"Name 1": "UNIVERSITY",
     -"Name 2": "",
     -"Street": "NEY AVE",
     -"Street Num": "16",
     -"Legacy ROD Num": null - "Repeat Client": "Y" -
 }, ...

Here is start of the error:

`Unhandled exception at line 11, column 6788 in
http://--------:51392/WW/js/kendo.web.min.js 0x800a139e - JavaScript
runtime error: Invalid template:'<tr data-uid="#=data.uid#"
role='row'><td  role='gridcell'>#=data.Account
Num==null?'':data.Account Num#</td><td 
role='gridcell'>#=data.address==null?'':data.address#</td><td 
role='gridcell'>#=data.Arb Location==null?'':data.Location#</td><td 
role='gridcell'>#=data.WNum==null?'':data.Num#</td><td`

Hopefully that's enough info to get some feedback. [banging my head]. Thanks in advance!

Answer 1

It's hard to tell completely, but it looks like the generated template is having problems because you have spaces in your data field names, for example:

'Account Num', and in the template it is trying to access "data.Account Num" which of course, will not work.

Set your data to have no spaces to begin with to see if that actually is the problem. If it is the problem, another solution (if you wanted to keep the spaces) would be to manually enter the columns instead of letting it auto-generate it.

... To deal with spaces:

First set your datasource scheme up with fields like:

schema: {
    data: "Data",
    model: {
        fields: {
            "Name": { type: "string" },
            "Account Num": { type: "string" }
        }
    }
}

Then for your columns, define them with template like so:

columns: [
   {
      field: "Name",
      title: "Name",
      template: "#=data['Name']==null?'':data['Name']#"
   },
   {
      field: "Account Num",
      title: "Account Num",
      template: "#=data['Account Num']==null?'':data['Account Num']#"
   }
]

What you originally had was kendo trying to generate the template itself, but it was trying to access

data.Account Num

which of course wouldn't work in javascript, so instead, you can manually define the template of each column to instead access

data['Account Num']

which will work properly and hopefully get the result you are looking for.