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.
Hello Flavio,
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.
Please do not hesitate to contact me if you have any further questions regarding this matter.