Transposing Data in Angular Grid

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

I want to display columns as rows and rows as columns in the Kendo UI for Angular Grid. How can I transpose the data inside the Grid?

This Knowledge Base article also answers the following questions:

• How can I transpose data in the Kendo UI for Angular Grid?
• Is it possible to swap rows and columns in the Kendo UI for Angular Grid?
• How to display columns as rows in the Kendo UI for Angular Grid?

Solution

To transpose the data inside the Kendo UI for Angular Grid:

1. Create a function to transpose the data programmatically:

   ts

   public transpose(): void {
       this.data.forEach((product, i) => {
           this.columnCount.push(i);
           for (let key of Object.keys(product)) {
               let item = { field: key };
               if (this.gridData.map((e) => e.field).indexOf(item.field) == -1) {
                   this.gridData.push(item);
               }
               this.gridData.forEach((item) => {
                   item['data' + i] = product[item.field];
               });
           }
       });
   }

2. Bind the transposed data in the Grid component.

   html

    <kendo-grid [data]="gridData">
         <kendo-grid-column field="field" title="Field"> </kendo-grid-column>
         @for(i of columnCount; track i){
             <kendo-grid-column field="{{ 'data' + i }}" [title]="'Item ' + (i + 1)"> </kendo-grid-column>
         }
     </kendo-grid>

The following example demonstrates the suggested approach in action.

Change Theme

Theme

Loading ...

See Also

• Kendo UI for Angular Grid Overview
• API Reference of the Grid
• Grid Data Binding