Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
2048
IgTileManager JSON Datasource and HTML inside
posted

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.

  • 5105
    Verified Answer
    Offline posted

    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!

  • 49378
    posted

    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 &lt; 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.

    bind-json.zip