Flex grid with object bound innerhtml

Flex grid with object bound innerhtml

Posted by: jason.brandt on 25 October 2018, 3:41 am EST

• 

  jason.brandt

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 October 2018, 3:41 am EST

  I am trying to create a flex grid that has an array of objects. I want the data to display with a ‘value’ from the object and be formatted with a ‘innerHTML’ from that same item object.

  I can get it to render the array and ‘value’ but i cant get the grid to display the ‘innerHTML’…

  Grid in html…

  <wj-flex-grid-column *ngFor="let col of columns" [header]="col.header" [binding]="col.binding" [visible]="col.visible" [isContentHtml]="true">
  					<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
  						<div [innerHTML]="col.innerHTML"></div>
  					</ng-template>
  				</wj-flex-grid-column>
  

  and ts model =

  export class WijmoGridRowDefinition {
  	
  	constructor(
          public header?: string,
  		public binding?:string,
  		public visible?: any,
  		public width?: any,
  		public innerHTML?: any
      ) { }
  }	
  

  The Component makes a list of these object and populated them from the database. The grid shows the data and the rows, but any item that has innerHTML is blank…

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 25 October 2018, 6:20 pm EST

  Hi,

  We are unable to replicate the issue at our end. We created a sample from the code snippet and everything seems to work as expected. Could you please have a look at the following sample and let us know the changes we need to make so that it replicates the issue: https://stackblitz.com/edit/angular-ggbije?file=app%2Fapp.component.html
  
  Also from the snippet provided, it seems that you setting innerHTML from the column definition(columns array) so please make sure that html is available at column definition.

  ~Sharad

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 26 October 2018, 7:05 am EST

  The place I am getting the error comes from making the content of the html based on the grid data.

  In your example you hard code that values of the HTML, this will not work for me.

  _html='[b]taco[/b],[i]Italic[/i],<u>underline</u>'.split(',');
  

  What i need is something more along the lines of …

  _html='[b]{{cell.item.EntityName}}[/b],[i]{{cell.item.EntityName}}[/i],<u>{{cell.item.EntityName}}</u>'.split(',');
  

  https://stackblitz.com/edit/angular-h6sn8x?file=app/app.component.ts

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 28 October 2018, 7:50 pm EST

  Hi,

  The issue with this approach is that, when setting innerHTML, the innerHTML property of div is assigned this value and parsed as normal HTML by the browser, so angular’s interpolation {{}} doesn’t work.

  What you need is some mechanism to replace interpolation string with actual value.
  
  Please refer to the following sample which uses wijmo.format() method to inject values into the HTML string(Note that wijmo.format() accepts a different format than angular’s interpolation syntax):
  
  https://stackblitz.com/edit/angular-agv8l7?file=app%2Fapp.component.ts

  However, this can get the job done but it is not recommended to format grid cells like this, use regular cell-templates or formatItem event.

  ~Sharad

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 29 October 2018, 3:55 am EST

  Do you have an example of the formatItem event with custom html in it or is it just for adding/removing css?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 29 October 2018, 4:48 pm EST

  Hi,
  
  The FormatItem can be used to change for both the cell HTML and styling. Please refer to the following demo sample that implements the same:
  
  https://stackblitz.com/edit/angular-u5q6ll?file=app/app.component.ts

  ~Manish

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 30 October 2018, 5:03 am EST

  Great! Thanks for the examples and info, cheers!