kendo clienttemplate with parameters

0
votes

I am trying to set up a Kendo MVC Grid using client templates for a set of columns. I have this and it is working:

columns.Bound(m => m.FC_Sun).ClientTemplate("# if(FC_Sun != Base_Sun) {#" + "<span style='color:red;'>#:FC_Sun # </span>" + "# } else {#" + "#: FC_Sun #" + "# } #");

However I would like to move this to a client template instead as I need to add quite a few more items to the column and an inline template just seems a little 'clunky'.

The question is, how can I do this with a single client template. I have an existing one which works for a particular column (the same one as above).

<script id="columnTemplate" type="text/kendo-tmpl">
  #if(FC_Sun != Base_Sun){#
<span style='color:orange'>#:FC_Sun #</span>
  #}else{#
<span>#: FC_Sun #</span>
  #}#
</script>

As you can see this is very much tied to one column, doing it this way I would need to create 7 templates, one for each day of the week, which just seems overkill. So is there a way to pass extra parameters to the template which tell it which values to use in the if statement..?

2
kendo-uikendo-gridkendo-asp.net-mvc

2 Answers

2
votes

As it turns out there is a way to pass parameters to the template, in the grid:

"#=customColumnTemplate($.extend({}, data, { field: 'FC_Sun' }))#"

And the template:

<script id="columnTemplate" type="text/kendo-tmpl"> 
  <p>#= data[field] #</p>
</script>
<script>
  var customColumnTemplate = kendo.template($('#columnTemplate').html());
</script>

The way I actually did it in the end though was to skip the external template and use a function directly:

"#=customColumnTemplate(data, 'FC_Sun', 'Base_Sun')#"

.

function customColumnTemplate(data, field, baseField) {         
  var fc = data[field];
  var fcBase = data[baseField];

  if (fc != fcBase) {
    return "<span style='color:red;'/>" + fc + "</span>";
  }

  return fc;
}
0
votes

There isn't a way to pass parameters directly to a Kendo template, unfortunately. However, you could try using a switch statement in your template, and add an enumeration (or whatever would work) to your model for the switch key:

<script id="columnTemplate" type="text/kendo-tmpl">
    # switch (DayofWeek) {
      case "Sunday": #
        <span style='color:orange;'>#:FC_Sun #</span>
      # break; #
    # case "Monday": #
        <span style='color:red;'>#:FC_Mon #</span>
      # break; #
  ...
    # } #
</script>

This should allow you to "pass parameters" via the model, and control the appearance of the template per model instance.

Hope this helps.