Kendo UI Grid按条件显示DetailTemplate的实现问题咨询

你之前的两种写法存在以下问题：

• 模板字符串写法：没有从当前行绑定的data对象中取ResultDate判断，且调用kendo.template后返回的是模板函数，没有传入数据执行获取渲染结果直接输出，导致内容异常
• 函数写法：没有从参数e（当前行数据对象）中取ResultDate，且直接返回了模板函数而非渲染后的HTML字符串

实现方式1：模板字符串直接判断 #

detailTemplate: '# if(data.ResultDate != null) { # #= kendo.template($("#detailRequestTemplate").html())(data) # # } #'

核心修正点：

• 通过内置的data关键字获取当前行绑定的数据源对象，取data.ResultDate做条件判断
• 调用kendo.template生成模板函数后，立刻传入data执行得到渲染后的HTML再输出

实现方式2：函数判断（推荐，逻辑复杂时可读性更高） #

// 提前编译模板，避免每次展开详情重复执行DOM查询和编译，优化性能
const requestDetailTemplate = kendo.template($("#detailRequestTemplate").html());

// Grid配置项
$("#grid").kendoGrid({
  // 其他配置省略
  detailTemplate: function (dataItem) {
    if (dataItem.ResultDate != null) {
      // 传入当前行数据执行模板函数，返回渲染后的HTML
      return requestDetailTemplate(dataItem);
    }
    // 不满足条件时返回空字符串，不会渲染详情内容
    return "";
  }
});

可选优化：隐藏无内容行的展开按钮 #

如果希望不满足条件的行完全不显示详情展开箭头，可以搭配dataBound事件处理：

$("#grid").kendoGrid({
  // 其他配置省略
  dataBound: function (e) {
    const grid = e.sender;
    // 遍历所有行
    grid.tbody.find("tr[role='row']").each(function () {
      const rowData = grid.dataItem(this);
      if (!rowData.ResultDate) {
        // 移除无详情内容行的展开按钮
        $(this).find(".k-hierarchy-cell a").remove();
      }
    });
  }
});

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