What is the best way to format a cell with an image and a number

What is the best way to format a cell with an image and a number

Posted by: ken_perregaux on 29 June 2018, 12:03 pm EST

• 

  ken_perregaux

  • Post Options:
  • Link
    Copy

  Posted 29 June 2018, 12:03 pm EST

  In my table I want certain cells based on a flag to have an image on the left of the cell but a number on the right of the cell. What is the best way to handle this (ItemFormatter, CellTemplate or something else) and could you give me an example (I’d prefer the formatter or template to be in typescript. I am using Angular 5 and wijmo flexgrid 5.20181.462.

  Thanks in advance!

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 2 July 2018, 4:55 am EST

  Hi,
  
  If you are using angular then the best way to handle this use case would be to use wjFlexGridCellTemplate.
  
  //refer to following code snippet

  
  <wj-flex-grid-column [binding]="'sales'" [align]="'left'" [header]="'Sales'" [format]="'n2'">
  	<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
  		<div *ngIf="flag" style="float:left">
  			<img src="https://www.geonames.org/flags/s/{{cell.item.abb}}.png">
  				{{cell.item.sales}}
  		</div>
  		<div *ngIf="!flag">
  			{{cell.item.sales}}
  		</div>
  	</ng-template>
  </wj-flex-grid-column>
  

  Here is an example implementing the same:- https://stackblitz.com/edit/angular-qsrvcx?file=app%2Fapp.component.ts

  ~Manish