Grid not loading correctly! (Error: Invalid template)

2 posts, 0 answers
  1. Nicolai
    Nicolai avatar
    3 posts
    Member since:
    Feb 2015

    Posted 16 Feb 2016 Link to this post

    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

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 18 Feb 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top