Populate a grid dynamically with a JSON object

Populate a grid dynamically with a JSON object

Posted by: suleman1 on 9 January 2019, 3:02 am EST

• 

  suleman1

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 January 2019, 3:02 am EST - Updated 3 October 2022, 8:13 pm EST

  Hi,

  I have following JSON object which we need to use to write it to a flexgrid. I am able to create the columns, populate but not getting a hint on how to populate the baseline array into each row.

  HTML:

    <wj-flex-grid [itemsSource]="data">
      
      <wj-flex-grid-column [header]="'Icon'" [binding]="'Icon'" align="center"></wj-flex-grid-column>
      <wj-flex-grid-column [header]="'Name'" [binding]="'Name'" align="center"></wj-flex-grid-column>
      <wj-flex-grid-column [header]="'Start'" [binding]="'BeginOffset'" align="center"></wj-flex-grid-column>
      <wj-flex-grid-column [header]="'End'" [binding]="'EndOffset'" [format]="'n0'" align="center"></wj-flex-grid-column>
      <wj-flex-grid-column [header]="'PaidHours'" [binding]="'PaidHours'" align="center"></wj-flex-grid-column>
      <wj-flex-grid-column [header]="'Period'" [binding]="'Period'" align="center"></wj-flex-grid-column>
      <wj-flex-grid-column *ngFor="let cell of baselineKeys"
      [header]="cell"
      [binding]="cell">
  </wj-flex-grid-column> 
    </wj-flex-grid> 
  

  TS File:

    public data: wjCore.CollectionView;  
      constructor(@Inject(DataService) dataSvc: DataService) {
        console.log("this products");
        dataSvc.get_products().subscribe((res : any[])=>{
          console.log(res);
          this.baselineKeys = this.getBaseline(res);
          this.finalBaselineJson = this.prepareBaseline(res, this.baselineKeys)
          this.data = new wjCore.CollectionView(res);
          });
      }
  

  [
    {
      "Baseline": [ 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4 ],
      "BeginOffset": 420,
      "ConfigIndex": 0,
      "EndOffset": 900,
      "Icon": "D",
      "Name": null,
      "PaidHours": 7.5,
      "Period": "D"
    }]
  

  

  1919×405 13.6 KB

• 

  suleman1

  • Post Options:
  • Link
    Copy

  Posted 9 January 2019, 11:31 pm EST

  Can you confirm how can we populate generated rows

   <wj-flex-grid-column *ngFor="let cell of baselineKeys"
      [header]="cell"
      [binding]="cell">
  </wj-flex-grid-column> 
  

  using this array:

  "Baseline": [ 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4 ]
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 10 January 2019, 1:14 am EST

  Hi,

  If we understand correctly then you would like to fill the grid rows with the value 4,4,4… (as in Baseline property), while also at the same time also wants other columns to be filled with the values of Icon, name … properties.
  
  We are sorry but this is not possible, FlexGrid expects the dataSource to be an array of objects i.e.
  
  [
  
  {prop1: “val1”, prop2: “val2”},
  
  {prop1: “val1”, prop2: “val2”},
  
  {prop1: “val1”, prop2: “val2”},
  
  …
  
  ]
  
  Each item in the array is treated as an individual row and properties defined on the objects bind to the column of the grid.
  
  You may even define a binding for columns like ‘props.nestedProp’ for the data source of the following type:
  
  [
  
  {prop1: “val1”, prop2: “val2”, props: {
  
  nestedProp: “nested value”
  
  }
  
  },
  
  {prop1: “val1”, prop2: “val2”, props: {
  
  nestedProp: “nested value”
  
  }
  
  },
  
  …
  
  ]
  
  Further grid also supports heirarchical data. Please refer to the ‘Trees and Hierarchical Data’ section the following sample: https://demos.wijmo.com/5/Angular2/FlexGridIntro/FlexGridIntro/

  Also, could you please let us know about your use case and how do you expect the grid to be displayed after the data is loaded in some more detail, so that we may suggest you the best possible alternative.

  ~Sharad

• 

  suleman1

  • Post Options:
  • Link
    Copy

  Posted 14 January 2019, 11:15 pm EST - Updated 3 October 2022, 8:13 pm EST

  Hi,

  I did the JSON change as you suggested now I have following JSON:

  [
     {
        "Baseline":[ 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4 ],
        "BeginOffset":420,
        "ConfigIndex":0,
        "EndOffset":900,
        "Icon":"D",
        "Name":null,
        "PaidHours":7.5,
        "Period":"D",
       "shiftBaseline":[ { "key":"M", "value":4 }, { "key":"T", "value":4 }, { "key":"W", "value":4 }, { "key":"R", "value":4 }, { "key":"F", "value":4 }, { "key":"S", "value":4 }, { "key":"N", "value":4 }, { "key":"M", "value":4 }, { "key":"T", "value":4 }, { "key":"W", "value":4 }, { "key":"R", "value":4 }, { "key":"F", "value":4 }, { "key":"S", "value":4 }, { "key":"N", "value":4 }, { "key":"M", "value":4 }, { "key":"T", "value":4 }, { "key":"W", "value":4 }, { "key":"R", "value":4 }, { "key":"F", "value":4 }, { "key":"S", "value":4 }, { "key":"N", "value":4 }, { "key":"M", "value":4 }, { "key":"T", "value":4 }, { "key":"W", "value":4 }, { "key":"R", "value":4 }, { "key":"F", "value":4 }, { "key":"S", "value":4 }, { "key":"N", "value":4 }
        ]
     },
     {      
  	  "Baseline":[ 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4 ],
        "BeginOffset":480,
        "ConfigIndex":0,
        "EndOffset":960,
        "Icon":"E",
        "Name":null,
        "PaidHours":7.5,
        "Period":"E",
             "shiftBaseline":[ { "key":"M", "value":4 }, { "key":"T", "value":4 }, { "key":"W", "value":4 }, { "key":"R", "value":4 }, { "key":"F", "value":4 }, { "key":"S", "value":4 }, { "key":"N", "value":4 }, { "key":"M", "value":4 }, { "key":"T", "value":4 }, { "key":"W", "value":4 }, { "key":"R", "value":4 }, { "key":"F", "value":4 }, { "key":"S", "value":4 }, { "key":"N", "value":4 }, { "key":"M", "value":4 }, { "key":"T", "value":4 }, { "key":"W", "value":4 }, { "key":"R", "value":4 }, { "key":"F", "value":4 }, { "key":"S", "value":4 }, { "key":"N", "value":4 }, { "key":"M", "value":4 }, { "key":"T", "value":4 }, { "key":"W", "value":4 }, { "key":"R", "value":4 }, { "key":"F", "value":4 }, { "key":"S", "value":4 }, { "key":"N", "value":4 }
  
        ]
     }
  ]
  

  Can you help in writing the column model for this grid. This is the Grid I am trying to achieve:
  
  

  

  1904×272 12.8 KB

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 15 January 2019, 12:59 am EST

  Thanks for the snapshot shared.
  
  From the snapshot, it appears that the baseline array length is static/fixed.
  
  If this is the case then you may simply define the binding to be Baseline[0], BaseLine[1]… and won’t need to transform the data.
  
  Please refer to the following sample which demonstrates the same:
  
  https://stackblitz.com/edit/angular-d9nubn?file=src%2Fapp%2Fapp.component.html

  Please let us know if this doesn’t fulfil your requirement.

• 

  suleman1

  • Post Options:
  • Link
    Copy

  Posted 15 January 2019, 1:40 am EST

  Thanks Sharad for the sample. But our arrays are not static. It depends on the number of weeks the baseline have. Can we make the column generation dynamic ?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 15 January 2019, 2:40 am EST

  You may generate the columns dynamically using *ngFor as in the following updated sample:
  
  https://stackblitz.com/edit/angular-aujmpl?file=src%2Fapp%2Fapp.component.html