kendo-ui: custom template with ternary operator in a grid

Question

I am trying to create a template for grid in kendo-ui. Its formatting is conditional...as follows:

dataset sample:

json: [{ "name" :"abc", "link":123 },{ "name" :"def", "link":null}...]

The template should be of the logic:

link === null ? <span>name</span> : <a target="_blank" href="http://mywebsite/name">#=name#</a>

ie conditionally make the text hyperlinked v/s display it as is ( "abc" should be displayed with a hyperlink while "def" should not have a hyperlink).

I am able to get the unconditional way of template working with always make the text as hyperlink as follows:

var nameTemplate = '<a target="_blank" href="http://mywebsite/#=name#">#=name#</a>';

But cannot get the template with the above ternary operator logic to work

Thoughts?

Thanks

Answer 1

You can use the function option of the template :

columns: [
    "name",
    { 
      field: "link", 
      title: "link", 
      template: function(dataItem) {
        return dataItem.link === null ? "<span>" + dataItem.name + "</span>" : "<a href='http://mywebsite/" + dataItem.name + "'>" + dataItem.name + "</a>"
      }
    },
]

DEMO