Background: I am attempting to work on a grid where one column can have different editor based on the column value in a Grid. I found a working example on Telerik site. It works great!

Issue: I like to separate out html code in html file vs jquery code in js file. Once I separated out the code like this I am getting an error which says "customTemplate is not defined". customTemplate is a function which is being called from template under field editor. I also created a JsFiddle of what my code looks like locally where i seem to be getting same error.

I think the problem is around template attribute where I am calling the customTemplate function. I tried swapping the double quotes to single quotes and that didn't seem to work either.

Below is how grid and customTemplate function is defined:

   $("#grid").kendoGrid({
      dataSource: dataSource,
      columns: [
        { field: "id" , title: "ID" },
        { field:"type" , title: "Type" },
        { field: "editor",
          title: "Editor",
           template: "#=customTemplate(data.type,data.editor)#",
          editor: chooseEditor
        }],
      editable: true
    });
  });

 function customTemplate(type,value) {
    if (value == null)
      return "";

    switch (type) {
      case "date":
        return kendo.toString(kendo.parseDate(value), 'yyyy/MM/dd');
      default:
        return value;
    }
  }