Hi all,
These is an error when I'm trying to Ioad my Kendo Grid, with dynamic data, so i'm doing something very wrong!? - i'm getting a invalid "template Error" (I'm not using templates as i see it?)
Error: Invalid template:'
<tr data-uid="#=data.uid#" role='row'>
<td role='gridcell'>#:data.Code==null?'':data.Code#</td>
<td role='gridcell'>#:data.Name==null?'':data.Name#</td>
<td role='gridcell'>#:data.319==null?'':data.319#</td>
<td role='gridcell'>#:data.383==null?'':data.383#</td>
<td role='gridcell'>#:data.394==null?'':data.394#</td>
<td role='gridcell'>#:data.396==null?'':data.396#</td>
<td role='gridcell'>#:data.398==null?'':data.398#</td>
<td role='gridcell'>#:data.466==null?'':data.466#</td>
<td role='gridcell'>#:data.147==null?'':data.147#</td>
<td role='gridcell'>#:data.149==null?'':data.149#</td>
<td role='gridcell'>#:data.150==null?'':data.150#</td>
<td role='gridcell'>#:data.148==null?'':data.148#</td>
<td role='gridcell'>#:data.143==null?'':data.143#</td>
<td role='gridcell'>#:data.421==null?'':data.421#</td>
</tr>
' Generated code:'var o,e=kendo.htmlEncode;with(data){o='
<tr data-uid="'+(data.uid)+'" role=\'row\'>
<td role=\'gridcell\'>'+e(data.Code==null?'':data.Code)+'</td>
<td role=\'gridcell\'>'+e(data.Name==null?'':data.Name)+'</td>
<td role=\'gridcell\'>'+e(data.319==null?'':data.319)+'</td>
<td role=\'gridcell\'>'+e(data.383==null?'':data.383)+'</td>
<td role=\'gridcell\'>'+e(data.394==null?'':data.394)+'</td>
<td role=\'gridcell\'>'+e(data.396==null?'':data.396)+'</td>
<td role=\'gridcell\'>'+e(data.398==null?'':data.398)+'</td>
<td role=\'gridcell\'>'+e(data.466==null?'':data.466)+'</td>
<td role=\'gridcell\'>'+e(data.147==null?'':data.147)+'</td>
<td role=\'gridcell\'>'+e(data.149==null?'':data.149)+'</td>
<td role=\'gridcell\'>'+e(data.150==null?'':data.150)+'</td>
<td role=\'gridcell\'>'+e(data.148==null?'':data.148)+'</td>
<td role=\'gridcell\'>'+e(data.143==null?'':data.143)+'</td>
<td role=\'gridcell\'>'+e(data.421==null?'':data.421)+'</td>
</tr>
';}return o;'
I have tryed to simplify my grid, but still same error.., -The key elements of the code looks like this:
in script;
kendo.destroy($('#objects_search_grid'));
$('#objects_search_grid').kendoGrid({
dataSource: new kendo.data.DataSource(gridListJson),
groupable: true,
columnMenu: true,
filterable: true,
columns: col,
});
var gridListJson = JSON.stringify(objlist);
gridListJson =
[{"143":"test 23","147":"I60","148":"A1","149":"","150":"s2","319":"","383":"","394":"","396":"","398":"","421":"","466":"","Code":"TEST","Name":"TEST"},{"143":"","147":"","148":"","149":"","150":"","319":"","383":"","394":"","396":"","398":"10.000","421":"","466":"","Code":"TEST","Name":"TEST"},{"143":"","147":"","148":"","149":"","150":"","319":"","383":"","394":"CCS Del af produkt","396":"2","398":"","421":"Projectspine.com her finder du også et link bips.dk","466":"Primære bygningsdele","Code":"TEST","Name":"TEST"}]
This is how I make my Columns(col) dynamic -> I use id as 'field' and name as 'title' -> The grid shows the column titles correct before failure. So the grid only shows the titles after loading the page.
// First 2 columns are hardcoded - then rest is looped into column objects
var col = [{ field: "Code", title: "Code", hidden: false }, { field: "Name", title: "Name", hidden: false }];
for (var i = 0; i < data.propertyItems.length; i++) {
var coldata = {};
coldata["field"] = data.propertyItems[i].Key;
coldata["title"] = data.propNames[data.propertyItems[i].Key].trim();
coldata["hidden"] = false;
col.push(coldata);
}
Any help is appreciated thanks.
Cheers
/Martin
1 Answer, 1 is accepted
Hello Nicolai,
I guess that the problem is caused due to the fact that Kendo UI Grid accepts only valid JavaScript identifier for column.field. In other words the field name should contain no spaces, no special characters, and the first character should be a letter.
Regards,Boyan Dimitrov
Telerik