如何在Telerik Grid单列实现Type、Size、Name多个异构字段编辑功能

你的需求本质是**属性列表（Property Grid）**布局，不属于标准的同构行数据表格场景，无需强行套用普通Grid的统一列绑定逻辑，通过行自定义模板+动态编辑器匹配即可实现，具体步骤如下：

• 第一步：构造适配的数据源

因为每一行对应一个独立属性配置，所以数据源每个条目需包含3个核心字段：PropertyName（对应Type/Size/Name的展示名）、PropertyType（用来标记对应编辑器类型）、PropertyValue（存储当前属性的取值）
示例JS数据源：

const propertyDataSource = [
  { PropertyName: "Type", PropertyType: "combo", PropertyValue: "" },
  { PropertyName: "Size", PropertyType: "float", PropertyValue: 0 },
  { PropertyName: "Name", PropertyType: "string", PropertyValue: "" }
]

• 第二步：配置Grid双列结构，第二列通过自定义模板动态渲染编辑器
  第一列直接绑定PropertyName做纯展示，第二列编写模板逻辑，根据PropertyType字段值判断渲染对应编辑器，示例ASP.NET Core Telerik Grid列配置：

columns.Bound(p => p.PropertyName).Title("属性名").Width("30%");
columns.Bound(p => p.PropertyValue).Title("属性值").Width("70%")
  .ClientTemplate("#=renderEditor(data)#");

配套renderEditorJS渲染逻辑：

function renderEditor(item) {
  switch(item.PropertyType) {
    case "combo":
      // 渲染Telerik下拉选择器，可自行绑定选项数据源
      return `<input name="Type" data-role="dropdownlist" data-source='["类型1","类型2","类型3"]' data-value="${item.PropertyValue}" />`
    case "float":
      // 渲染Telerik数值编辑器，可自定义小数位数、取值范围
      return `<input name="Size" data-role="numerictextbox" data-decimals="2" data-min="0" value="${item.PropertyValue}" />`
    case "string":
      // 渲染文本编辑器
      return `<input name="Name" type="text" value="${item.PropertyValue}" />`
  }
}

• 第三步：初始化动态生成的编辑器
  Grid数据绑定完成后，批量初始化所有动态渲染的Telerik编辑器，保证组件功能正常生效：

$("#grid").data("kendoGrid").bind("dataBound", function() {
  kendo.bind(this.element, kendo.observable({}));
})

• 第四步：编写取值组装逻辑
  提交数据时遍历Grid数据源，提取每个属性的取值组装成业务需要的对象格式即可：

function getSubmitData() {
  const items = $("#grid").data("kendoGrid").dataSource.data();
  const businessData = {};
  items.forEach(item => {
    businessData[item.PropertyName] = item.PropertyValue;
  })
  return businessData;
}

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