Question

我正在尝试使用客户端模板为一组列设置一个Kendo MVC Grid。我有这个，它正在运作：

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

但是我想把它移到客户端模板上，因为我需要在列中添加更多的项目，内联模板看起来有点'笨重'。

问题是，如何使用单个客户端模板执行此操作。我有一个适用于特定列的现有列（与上面相同）。

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

正如你所看到的那样，它与一个列非常相关，这样做我需要创建7个模板，一个星期的每一天，这看起来有点过分。那么有没有办法将额外的参数传递给模板，告诉它在if语句中使用哪些值。？

Answer 1

事实证明，有一种方法可以在网格中将参数传递给模板：

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

模板：

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

我最终实际做到的方式是跳过外部模板并直接使用函数：

"#=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;
}

Answer 2

遗憾的是，还没有将参数直接传递给Kendo模板的方法。但是，您可以尝试在模板中使用switch statement，并在模型中为切换键添加枚举（或任何可行的枚举）：

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

这应该允许你传递参数＆＃34;通过模型，控制每个模型实例的模板外观。

希望这有帮助。

kendo clienttemplate with parameters

2 个答案: