如何在Kendo Grid响应式列模板中显示外键的Registration字段？

1. 用Kendo Grid内置的外键列配置（推荐） #

这是最简洁的方式，直接利用Grid的外键列特性，自动关联显示对应的Registration字段，编辑时还会自动生成下拉选择框：

前端JS示例： #

// 先定义Aircraft表的数据源，包含AircraftID和Registration字段
var aircraftDataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "/Aircraft/GetAll",
      dataType: "json"
    }
  }
});

// 配置Grid列
$("#grid").kendoGrid({
  dataSource: flightLogDataSource, // 你的FlightLog数据源
  columns: [
    {
      field: "AircraftID",
      title: "飞机注册号",
      foreignKey: aircraftDataSource,
      textField: "Registration", // 指定要显示的关联字段
      width: 150,
      responsivePriority: 1 // 保留你的响应式优先级设置
    },
    // 其他列配置...
  ],
  // 其他Grid配置...
});

MVC Razor示例： #

@(Html.Kendo().Grid<MyApp.Models.FlightLog>()
    .Name("grid")
    .Columns(columns => {
        columns.ForeignKey(p => p.AircraftID, (System.Collections.IEnumerable)ViewData["Aircrafts"], "AircraftID", "Registration")
            .Title("飞机注册号")
            .Width(150)
            .ResponsivePriority(1);
        // 其他列...
    })
    // 其他Grid配置...
)

注：后端需要把Aircraft列表存入ViewData["Aircrafts"]供Grid调用

2. 自定义响应式模板实现 #

如果已经有自定义的响应式模板，也可以直接在模板中渲染Registration字段：

• 方案一：后端返回FlightLog数据时，直接关联带出Registration字段（比如EF中用Include关联Aircraft表），模板直接取值：

columns: [
  {
    field: "AircraftID",
    title: "飞机注册号",
    template: "#= Registration #", // 直接用后端返回的关联字段
    responsivePriority: 1
  }
]

• 方案二：前端通过Aircraft数据源匹配对应值：

columns: [
  {
    field: "AircraftID",
    title: "飞机注册号",
    template: function(dataItem) {
      // 从Aircraft数据源中查找匹配的记录
      var aircraft = aircraftDataSource.get(dataItem.AircraftID);
      // 处理数据源未加载完成的情况
      return aircraft ? aircraft.Registration : "未匹配";
    },
    responsivePriority: 1
  }
]

注意：这种方式要确保Aircraft数据源在Grid渲染前已经加载完成，可在Grid的dataBound事件中做二次渲染处理

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