CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-grid
HereToLearn_
HereToLearn_

Reputation: 1180

jQuery Kendo Grid calling a function from template

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;
    }
  }

Here is the screenshot of the ReferenceError I get

Upvotes: 0

Views: 2176

Answers (1)

David
David

Reputation: 6131

Use a function to call your function instead of a template string:

{
  field: 'editor',
  title: 'Editor',
  template: function(dataItem) {
    return customTemplate(dataItem.type, dataItem.editor);
  },
  editor: chooseEditor
}

Fiddle: https://dojo.telerik.com/AluziYAc

Upvotes: 2

Related Questions