Angular Kendo Grid列转行需求咨询：能否将指定列转为行展示？

这个需求完全可以实现，下面给你两种可行的方案：

方案一：预处理数据源 + 自定义单元格模板 #

先把接口返回的数据做转换，把需要转成行的2个字段包装成数组，再通过Kendo Grid的单元格模板渲染成多行：

1. 转换数据源
   假设接口返回的数据结构如下，我们先做格式转换：

// 原始接口数据结构
interface OriginalData {
  field1: string;
  field2: string;
  field3: string;
  field4: string;
  field5: string;
  field6: string;
}

// 转换后的数据结构
interface TransformedData {
  field1: string;
  field2: string;
  field3: string;
  field4: string;
  extraFields: {key: string, value: string}[];
}

// 转换函数
transformData(originalList: OriginalData[]): TransformedData[] {
  return originalList.map(item => ({
    field1: item.field1,
    field2: item.field2,
    field3: item.field3,
    field4: item.field4,
    extraFields: [
      {key: '字段5', value: item.field5},
      {key: '字段6', value: item.field6}
    ]
  }));
}

2. Grid模板配置
   在组件模板中，给目标列使用kendoGridCellTemplate渲染多行内容：

<kendo-grid [data]="transformedData">
  <kendo-grid-column field="field1" title="字段1"></kendo-grid-column>
  <kendo-grid-column field="field2" title="字段2"></kendo-grid-column>
  <kendo-grid-column field="field3" title="字段3"></kendo-grid-column>
  <kendo-grid-column title="扩展字段">
    <ng-template kendoGridCellTemplate let-dataItem>
      <div *ngFor="let field of dataItem.extraFields">
        <span>{{field.key}}: {{field.value}}</span>
      </div>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

方案二：使用详情行（Detail Row） #

如果希望扩展字段默认折叠，点击行再展开展示，用Kendo Grid的详情行功能更合适：

1. 模板配置

<kendo-grid [data]="originalData" [detailRowHeight]="60">
  <kendo-grid-column field="field1" title="字段1"></kendo-grid-column>
  <kendo-grid-column field="field2" title="字段2"></kendo-grid-column>
  <kendo-grid-column field="field3" title="字段3"></kendo-grid-column>
  <kendo-grid-column field="field4" title="字段4"></kendo-grid-column>

  <ng-template kendoGridDetailTemplate let-dataItem>
    <div class="detail-content">
      <p>字段5: {{dataItem.field5}}</p>
      <p>字段6: {{dataItem.field6}}</p>
    </div>
  </ng-template>
</kendo-grid>

2. 样式调整
   添加CSS优化详情行的排版：

.detail-content {
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

两种方案都能实现你要的效果，第一种是直接在单元格内展示多行内容，第二种是通过折叠详情行展示，你可以根据实际交互需求选择。

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