Kendo UI Grid模板if条件判断Status字段报user未定义如何解决

报错原因 #

你当前使用的模板写法直接引用Status变量，Kendo UI 模板渲染时需要通过行数据绑定对象访问字段值，未明确指定作用域时会触发变量寻址异常，进而抛出类似user is not defined的关联报错。同时原有模板未覆盖非匹配值的输出逻辑，会导致非On Request状态的内容为空。

正确实现方式 #

提供3种兼容不同场景的实现方案：

方案1：模板内明确指定data作用域（兼容原有模板写法） #

直接修改模板内的字段引用方式，明确通过默认行数据对象data访问字段，是改造成本最低的方案：

field: 'Status',
width: '70px',
template: "#if(data.Status === 'On Request') {#<div class='redAndBold'>#:data.Status</div>#} else {# #:data.Status# #}#"

方案2：函数式模板（推荐复杂逻辑场景） #

用函数代替字符串模板，语法更直观，完全避免模板解析的变量作用域问题：

field: 'Status',
width: '70px',
template: function(dataItem) {
  if(dataItem.Status === 'On Request') {
    return '<div class="redAndBold">' + dataItem.Status + '</div>';
  }
  return dataItem.Status;
}

方案3：attributes配置（仅加样式无需修改结构场景） #

如果不需要额外包裹div元素，直接给单元格加类即可生效，可以用列属性配置实现，代码更简洁：

field: 'Status',
width: '70px',
attributes: function(dataItem) {
  return dataItem.Status === 'On Request' ? { "class": "redAndBold" } : {};
}

内容的提问来源于stack exchange，提问作者IsaacJan