Cylex Cylex - 2 months ago 8
Javascript Question

Uncaught TypeError: showItems is not a function

I didn't know what had went wrong where i had defined the function but it still giving error.

var sampleData = [
{ id: 1, name: "name", items: ["foo", "bar"] }
];
var defaultColumns=[
{ field: "id" },
{ field: "name" },
{ field: "items", "template":kendo.template("#= showItems(items) #") }
];


$("#grid").kendoGrid({
dataSource: {data:sampleData},
columns:defaultColumns
});
function showItems(arr) {
return arr.join("</br>") ;
}


My sample code

Answer

I was able to solve the solution by declaring the showItems in global and it perfectly fine.

    function showItems(arr) {
      return arr.join("</br>");
    }

    var sampleData = [{
      id: 1,
      name: "name",
      items: ["foo", "bar"]
    }];
    var defaultColumns = [{
      field: "id"
    }, {
      field: "name"
    }, {
      field: "items",
      "template": kendo.template("#= showItems(items) #")
    }];


    $("#grid").kendoGrid({
      dataSource: {
        data: sampleData
      },
      columns: defaultColumns
    });
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Kendo UI Grid</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>

<body>

  <div id="grid"></div>


</body>

</html>

Comments