Kendo-Angular :How to represent list view of JSON object

Question

I have a JSON object , whose data needs to be represented in a list view

{
    "TestId": 2,
    "CurrentTestVersion": 1,
    "TestNumber": "2015-29059",
    "SharingData": 1.000000,
    "ThresholdValue": 0.0,
    "ExpireDate": "2022-12-31T00:00:00",
    "UpdateDate": "2021-10-01T00:00:00",
    "TestCurrency": "INR",
    "TestCode": "44300",
    "TestUCode": "UU",
    "IndexType": "TRE",
    "IndexUCode": "EUR",
    "IndexUMCode": "not",

}

Above data needs to be represented in a list format as below

I have tried with using row and column tags with span class

<div class="row">
   <div class="col-sm-12">
      <span class="fs12px">Currency:
      {{test.TestCurrency}} </span>
   </div>
</div>
<div class="row">
   <div class="col-sm-12">
      <span class="fs12px">CurrentTestVersion:
      {{test.CurrentTestVersion}} </span>
   </div>
</div>
<div class="row">
   <div class="col-sm-12">
      <span class="fs12px">Expire Date :
      {{test.ExpireDate}}</span>
   </div>
</div>

How can I achieve list view using Kendo, I have checked kendo list view documentation , but couldn't find to suit as it is also a grid.

Answer 1

You can use a KendoGrid component like this:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid
          [data]="gridData"
          [hideHeader]="true"
          >
            <kendo-grid-column class="cell" field="key"></kendo-grid-column>
            <kendo-grid-column class="cell" field="value"></kendo-grid-column>
        </kendo-grid>
    `,
    styles: [`
        .k-grid td.cell {
            text-align: center;
        }
    `],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public json = {
        "TestId": 2,
        "CurrentTestVersion": 1,
        "TestNumber": "2015-29059",
        "SharingData": 1.000000,
        "ThresholdValue": 0.0,
        "ExpireDate": "2022-12-31T00:00:00",
        "UpdateDate": "2021-10-01T00:00:00",
        "TestCurrency": "INR",
        "TestCode": "44300",
        "TestUCode": "UU",
        "IndexType": "TRE",
        "IndexUCode": "EUR",
        "IndexUMCode": "not",
    };

    public gridData: any = Object.keys(this.json).map((key) => {
        return {
            key: key,
            value: this.json[key]
        }
    });
}

Here's the result: