Kendo Grid通过API请求获取数据成功但表格未填充数据问题咨询

核心问题1：JSONP格式不匹配 #

你配置了dataType: "jsonp"，但你的API返回的是普通JSON格式，并非JSONP要求的「函数调用包裹JSON」格式，导致Kendo DataSource无法正常解析返回数据。而将dataType改为json时出现的CORS错误是跨域限制导致，比修改JSONP适配成本更低的方案是在后端接口配置CORS允许头。
以常见的Node.js Express后端为例，仅需引入cors中间件即可快速解决跨域问题：

// 后端代码示例
const cors = require('cors');
app.use(cors());

核心问题2：数据类型不匹配 #

你的API返回的Confirmed、Stat字段是数字1/0，但DataSource中定义的字段类型是布尔值，Kendo默认不会自动转换数字为布尔值，会导致字段解析失败。 #

核心问题3：Status列缺少模板 #

你在onDataBound回调中通过.badgeTemplate类名渲染状态徽章，但列定义中没有对应类名的元素，就算数据正常加载也无法显示状态标识。 #

完整修改方案 #

1. 后端配置CORS后，修改DataSource配置： #

var gridDataSource = new kendo.data.DataSource({
  transport: {
    read:{
      url: "http://localhost:3000/api/reg",
      dataType: "json",
      type: "GET",
    }
  },
  schema:{
    // 若接口返回格式为 {data: [数据数组]} 请取消下一行注释
    // data: "data",
    parse: function(response) {
      // 若接口返回单条对象而非数组，统一转为数组格式
      const data = Array.isArray(response) ? response : [response];
      // 转换数字为布尔值
      return data.map(item => ({
        ...item,
        Confirmed: !!item.Confirmed,
        Stat: !!item.Stat
      }))
    },
    model:{
      id: "id",
      fields:{
        id: { type: "number" },
        Number: { type: "string" },
        Date: { type: "date" },
        Amout: { type: "number" },
        Net: { type: "number" },
        Category: { type: "string" },
        Commen: { type: "string" },
        Entity: { type: "string" },
        Quart: { type: "string" },
        Confirmed: { type: "boolean" },
        Stat: { type: "boolean" }
      }
    }
  }
});

2. 修改Status列定义，添加徽章模板： #

{
    field: "Stat",
    title: "Status",
    template: '<span class="badgeTemplate"></span>'
}

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