[Solved] Conditional Template

[gdycus]

Does anyone know why the following doesn't work right? I know for sure that "HasNotes" returns true for some records, but the following code never meets the "true" condition. Thanks!

template: "#=HasNotes#" == "true" ? "<a href=\"javascript:void(0)\" onclick=\"openNotes(#=CustomerKey#, #=ReservationKey#)\">View Notes</a>" : "N/A"

[Simon]

The clarification about using #if ... #} inside the template string instead of comparing values outside the string cleared up a lot of confusion for me.

[Petyo]

Hi Grady Dycus,

 I think that what you are trying to accomplish should look like this:

template: '#if (HasNotes) {# <a href="javascript:void(0)" onclick="openNotes(${CustomerKey}, ${ReservationKey})">View Notes</a> #} else {# N/A #}#'

The condition should be embedded in the template string itself. 

In addition, I would like to recommend using ${} for your case.

Greetings,
Petyo
the Telerik team

[Thomas]

@Petyo:

Where (in which scope) would you define function openNotes(CustomerKey, ReservationKey)



template: '#if (HasNotes) {# <a href="javascript:void(0)" onclick="openNotes(${CustomerKey}, ${ReservationKey})">View Notes</a> #} else {# N/A #}#'

??

[Petyo]

Hello Thomas,

 You can pass the function reference as a parameter to the template. See this example - http://jsfiddle.net/yfqvM/13/. 

Best wishes,
Petyo
the Telerik team

[ulises]

How can i implement these template in a command?

command:{ text: "Work", field: "Coment", click: function (e) { console.log("Hello")},template:'#if(Comentario != 0){# <a href="\\#" class="k-button k-button-icontext k-grid-Work"><span class="fa fa-2x fa fa-pencil-square-o text-default"></span></a> # } else {# <a href="\\#" class="k-button k-button-icontext k-grid-Work"><span class="fa fa-2x fa fa-pencil text-default"></span></a> #} #',},

[Petyo]

In addition to that, it also works if the function is visible at of the template definition.

http://jsfiddle.net/yfqvM/14/

Kind regards,
Petyo
the Telerik team

[Georgi]

Hi Ulises,

Based on the provided information I assume that the requirement is to add a template to a command. Currently the commands do not have a template property. 

As a workaround it is possible to iterate through the rows within the dataBound event handler and set the template of the column based on a condition.

e.g.

dataBound:function(){
       var grid = this;
       this.tbody.find('tr').each(function(_,x){
         var dataItem = grid.dataItem(x);
         if(dataItem.Comentario != 0){
           $(x).find('.k-grid-Work').html('<span class="fa fa-2x fa fa-pencil-square-o text-default"></span>')
         }else{
           $(x).find('.k-grid-Work').html('<span class="fa fa-2x fa fa-pencil text-default"></span>')
         }
       })
     }

Below you will find a sample which demonstrates the above solution:

• http://dojo.telerik.com/@joronator/ugAXIv/2

Regards,
Georgi
Progress Telerik