如何为Kendo UI Grid空单元格设置统一默认提示消息？

好问题！Kendo UI Grid本身确实没有像noDataMessage那样直接为空单元格设置全局提示的内置属性，但我们可以通过几个灵活的方式来实现这个需求，下面给你两种实用的方案：

方案1：通用模板函数（推荐，灵活可控） #

先定义一个全局的空值处理函数，然后在列的template中复用它，既能统一设置提示，也能给特定列单独定制：

// 定义通用的空值格式化函数，可自定义默认提示
function formatCellValue(value, defaultMsg = "暂无数据") {
  // 覆盖null、undefined、空字符串的情况
  return (value === null || value === undefined || value === "") ? defaultMsg : value;
}

然后在你的列配置中调用这个函数：

columns: [
  {
    field: "title",
    title: "Title",
    template: "#= formatCellValue(title) #"
  },
  {
    field: "UnitPrice",
    title: "Unit Price",
    // 也可以给当前列单独指定提示语
    template: "#= formatCellValue(UnitPrice, '价格未设置') #"
  },
  // 其他列同理...
]

针对你示例中Ikura的UnitPrice为null的情况，用这个方法就能把显示的null替换成你设置的提示文本。

方案2：dataBound事件批量处理（适合快速全局统一） #

如果你的Grid已经有大量列，不想逐个修改template，可以利用Grid的dataBound事件，在数据绑定完成后批量替换空值显示：

$("#grid").kendoGrid({
  dataSource: yourDataSource,
  columns: yourColumnsConfig,
  // 其他配置...
  dataBound: function() {
    const grid = this;
    const defaultMsg = "暂无数据";
    // 遍历所有数据单元格
    grid.tbody.find("td").each(function() {
      const cellText = $(this).text().trim();
      // 判断是否为需要替换的空值显示
      if (cellText === "null" || cellText === "undefined" || cellText === "") {
        $(this).text(defaultMsg);
      }
    });
  }
});

这个方法的优势是快速生效，但要注意：如果你的单元格里包含HTML元素（比如按钮、链接），需要调整选择器避免误修改这些元素的文本。

补充说明 #

• 对于数字类型的列，template的优先级高于format属性，所以用上面的方法不会和数字格式化冲突；
• 如果需要更复杂的样式（比如灰色文本），可以在提示文本外包裹HTML标签，比如return "<span class='empty-cell'>" + defaultMsg + "</span>"，再配合CSS美化。

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