Hi,
not sure this quetion is closely related to IG tools, but I would like to know something more about JSON datasource binding where a field is HTML. For example:
var dataSource = [ { name: "Tile number 1", text: "Subtitle 1", view: '<div><img src=\"\/Images\/One.jpg\" \/></\div>" }, { name: "Tile number 2", text: "Subtitle 2", view: '<div><img src=\"\/Images\/Two.jpg\" \/></\div>" },...
I bind it to a div (id="dashboard") and I call igTileManager function:
var options = { cols: 1, columnWidth: "25%", columnHeight: "25%", marginLeft: 10, marginTop: 10, items: [ { rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 }, { rowIndex: 0, colIndex: 1, rowSpan: 3, colSpan: 3 }, { rowIndex: 1, colIndex: 0, rowSpan: 1, colSpan: 1 }, ... ], maximizedTileIndex: 1, showSplitter: false, showRightPanelScroll: true, dataSource: dataSource, maximizedState: '<h3>${name}</h3><p class="text">${text}</p>' + '<div style="clear: both">Report Content</div>' + '${view}', minimizedState: '<h4>${name}</h4>' }; $.ig.loader(function() { $('#dashboard').igTileManager(options); });
When page is rendered igTile is working properly, but even if Name and text property are correctly rendered, view property appears like a string. It seems obvious, but I would like to know if there is a quickly way to say: "ok, this is HTML, render it and not put a string".
Thanks in advance,
Flavio M.
Hi there,
In order to output the HTML without the string being escaped you have to use the {{html view}} syntax rather than ${view}. The {{html propName}} tells the ig templating engine not to encode the values.
Thank you for using our forums!
Hello Flavio,
Please do not hesitate to contact me if you have any further questions regarding this matter.
The IG templating engine does not currently accept html input and ensures that any strings are rendered and output as regular strings (which would include replacing < with < forinstance.
A possible approach to convert the text of an item to html would be to handle the tileMaximized or tileMinimized events depending on whether the minimized or maximized state of the tile is to be modified, and manually unescape the desired html string. Attached is a small sample illustrating this in practice. Please note however that this is a custom approach and limitations may apply. The maximized and minimized events are fired after the animation duration, therefore a "lag" while expanding or minimizing items is likely. In the attached sample the tile containing html is the Douglas Crockford one.
Please feel free to contact me if you have any questions.