Hello
Is is possible to display rich text on a Text column? Like a text from CKEditor with italic and bold tags
Thanks!
Hello @Victor Salvalagio Pereira ,
It is possible to achieve something like this:
In this case, the Product Name column is allowing to receive html content and display it. First row is actually <u>Black and grey headphones</u>
For this, you can use this JS line in the screen or block that has the Data Grid On Ready event:
This will allow the content to be rendered as HTML.
Warning: we advise not to use this, if you don't control the source of the content, rendering HTML may be more susceptible to attacks like Cross Site Scripting. Also if the cell value is editable, you'll see the HTML markup.
In attachment, you can find a sample OML with this implementation.
Please keep in mind that this hasn't been tested for all possible use cases or that it cover all of your requirements, so we cannot assure that it will work for all use cases.
Please let us know if this helps.
Bruno Martinho
Currently Text Column only supports simple text, one of the reasons is security. If the component allows to render HTML, it may be more susceptible to attacks like Cross Site Scripting.
Can you please share a little bit more on your use case?
Thanks,
Hi Bruno, thanks for your answer
I have an input using CKEditor to save a text with italic and bold, and I wanted to display this value formatted on the grid, without showing the HTML tags.
Thanks Bruno!I will take a look at this
For future reference (tested on v2.20.2):
Using the `isContentHTML` flag is fragile because when the grid decides to recreate the column, that flag disappears (e.g. when adding and removing the column from the grid panel).
A solution I found is to add the following handler (add it once in the grid's OnInitialize event):const gridObj = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridId); const provider = gridObj.provider; // wijmo.grid.FlexGrid instance
provider.formatItem.addHandler((s, e) => { // Only touch data cells (skip header/footer panels). if (e.panel !== s.cells) return; const { binding } = s.columns[e.col]; if (binding === $parameters.Binding) {
e.cell.innerHTML = s.getCellData(e.row, e.col, false);
}}});