Search code examples
javascriptangulartypescriptkendo-uiangular7

Problem in showing data in a table for single object in angular

I have a function in angular as:

 memberDtos=[];

    getDataOfDtoCache(cacheData:any,nameOfCache:String){
        console.log(nameOfCache);
        this.hasTableClicked=true;
           this.memberDtos.push(cacheData);
            this.tableName=nameOfCache;
         console.log(this.memberDtos);
      }

While doing console.log(this.memberDtos); I am getting a single Object as:

GBIM: false
GBI: false
NCHL_T: false
NCHLST: false
NIB_Q: false
NIBL_S: false
P_RQ: false
PES: false
SQ: false
SBL_RES: false
STLME_REQ: false
STL_IME_RES: false
STLIBL_REQ: false
SN_RES: false
STRVU_REQ: false
SU_RES: false
S_REQ: false
STL_RES: false

I want this single object to come in table as:

enter image description here

But in html part I used KendoUI as:

   <kendo-grid 
              [kendoGridBinding]="memberDtos" 

              [resizable]="true"
              [filterable]="true"
              [groupable]="true"
              [sortable]="true"
              [pageable]="{
                buttonCount:4,
                pageSizes:[5,10,15]
                }"
              [pageSize]="5"
              *ngIf="hasTableClicked && tableName=='Member DTO'"   >

                  <kendo-grid-column field="memberId" title="Bo Id" width="70">
                  </kendo-grid-column>
                  <kendo-grid-column field="memberCode" title="Client Dealer Id" width="100s">
                  </kendo-grid-column>

              </kendo-grid>

But in my UI I got the whole data at single row as:

enter image description here

It is just showing me one single row.I want entire data to come in different rows.Can i get it or not?

Solution

  • kendoGridBinding accepts data as an (iterable) array of objects. You need to transform your data into array of key: value objects to be able to display the values in different columns as on your image.

    Here's working JSFiddle example of what it should look like

    Traverse the input data with for in loop and push the data into memberDtos array as { key: value }