How to address flattened child rows in Flex Grid (Angular6)

How to address flattened child rows in Flex Grid (Angular6)

Posted by: ssmith on 19 July 2018, 7:58 am EST

• 

  ssmith

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 July 2018, 7:58 am EST

  I have a data structure I need to display in a FlexGrid in an Angular6 application.

  data = {
        "Name": "Acme",
        "Number": "454",
        "Foos": [
          {
            "Abc": "Alpha",
            "Def": "Beta",
          },
          {
            "Abc": "Delta",
            "Def": "Charlie",
          }
        ],
        "Bars": [
          {
            "Abc": "Foxtrot",
            "Def": "Echo",
          },
          {
            "Abc": "Tango",
            "Def": "Kilo",
          }
        ]
      }
  

  The arrays are static - they will always contain 2 objects, and the attribute names will never change, but I need to display the row flattened in the grid, so I’m hoping I can do something like this:

  <wj-flex-grid #flex
  [itemsSource]="data">
  
  	<wj-flex-grid-column [header]="'Name'" [binding]="'Name'" align="center" [width]="60">
  	  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
  		<span class="grid_link">{{item.Name}}</span>
  	  </ng-template>
  	</wj-flex-grid-column>
  
  	<wj-flex-grid-column [header]="'Number'" [binding]="'Number'" align="center" [width]="60">
  	  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
  		<span class="grid_link">{{item.Number}}</span>
  	  </ng-template>
  	</wj-flex-grid-column>
  
  	<wj-flex-grid-column [header]="Foos Abc" [binding]="'Foos[0]'" [width]="140">
  	  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
  		<span class="grid_link">{{item.Abc}}</span>
  	  </ng-template>
  	</wj-flex-grid-column>
  
  	<wj-flex-grid-column [header]="Foos Def" [binding]="'Foos[1]'" [width]="140">
  	  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
  		<span class="grid_link">{{item.Def}}</span>
  	  </ng-template>
  	</wj-flex-grid-column>
  
  	<wj-flex-grid-column [header]="Bars Abc" [binding]="'Bars[0]'" [width]="140">
  	  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
  		<span class="grid_link">{{item.Abc}}</span>
  	  </ng-template>
  	</wj-flex-grid-column>
  
  	<wj-flex-grid-column [header]="Bars Def" [binding]="'Bars[1]'" [width]="140">
  	  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
  		<span class="grid_link">{{item.Def}}</span>
  	  </ng-template>
  	</wj-flex-grid-column>
  
  </wj-flex-grid>
  

  Is that correct? Will that work? Or is there another way to set this up?

  The end result should be a single grid row that looks like this:

  Acme    454   Alpha    Beta    Delta    Charlie    Foxtrot    Echo    Tango    Kilo
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 19 July 2018, 11:21 pm EST

  Hi,
  
  Thanks for notifying tried solution at your end. The approach used is correct.
  
  Also, FlexGrid allows you to define column binding with array and objects syntax.
  
  So to bind a column with data.Foos[0].Abc object you may define binding as ‘data.Foos[0].Abc’.
  
  When using cell-templates, the row’s data item is available as item object rather than a stripped down cell data object, hence to refer "data.Foos[0].Abc ", you should use {{item.Foos[0].Abc}}.

  ~Manish

• 

  ssmith

  • Post Options:
  • Link
    Copy

  Posted 20 July 2018, 2:58 am EST

  Thanks for confirming so quickly! Cheers!

• 

  ssmith

  • Post Options:
  • Link
    Copy

  Posted 20 July 2018, 4:44 pm EST

  Just so I’m clear - if I’m binding the flex-grid itself to the data object like this:

  <wj-flex-grid #flex
  [itemsSource]="data">
  

  Do I bind the rows to ‘data.Foos[0].Abc’ or just ‘Foos[0].Abc’?

  Also, if I’m using cell templates, so I still set the binding in the column?

  For example:

  	<wj-flex-grid-column [header]="'Name'" [b][binding]="'Name'"[/b] align="center" [width]="60">
  	  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
  		<span class="grid_link">[b]{{item.Name}}[/b]</span>
  	  </ng-template>
  	</wj-flex-grid-column>
  

  Do I use both bolded elements here? [binding]=“‘Name’” in the tag as well as {{item.Name}} inside the tag?

  Thanks again!