Kendo UI Grid, Uncaught Error: Invalid Template

Question

Trying to put an array i've formatted into kendo UI Grid. This is the code I'm using.

$(document).ready(function (){
    $("#grid").kendoGrid({
        columns: [
            { title: "Ticket Number", field: "0" },
            { title: "Title", field: "1" },
            { title: "Created On", field: "2" },
            { title: "Modified On", field: "3" },
            { title: "Queue", field: "4" },
            { title: "Status", field: "5" },
            { title: "Account", field: "6" },
            { title: "Contact", field: "7" },
            { title: "Service Type", field: "8" },
            { title: "Issue Type", field: "9" }
        ],
        dataSource: dataset
    });
});

the variable dataset contains a list of columns and rows with the data I wish to display. When Running the code I get:

Uncaught Error: Invalid template:'<tr data-uid="#=data.uid#" role='row'>

I'm not sure what I'm doing wrong. The data in the array is in the correct order, and the columns are rendering on the page. but it dosen't seem to want to insert my data.

Juliën Juliën · Accepted Answer · 2015-08-15T12:14:14

The reason for the "Invalid template" error is that it looks like you're trying to set the columns' fields by index, e.g.:

field: "0"

You're actually parsing strings here, though. Rather, you should provide the actual field names from your dataset:

<script>
  $(function (){
      var dataset = [
        { ticketId: "1000", title: "Lorem" },
        { ticketId: "1001", title: "Ipsum" }
      ];

      $("#grid").kendoGrid({
        columns: [
          { title: "Ticket Number", field: "ticketId" },
          { title: "Title", field: "title" }
        ],
        dataSource: dataset
      });
  });
</script>

Here's a working sample.

That will probably work, but without an exacte sample of your dataset there is nothing further to assist with.

Kendo UI Grid, Uncaught Error: Invalid Template

1 Answers