Render HTML preformatted text in grid

Flow
1

I have some text coming into my Grid column from a database. It has HTML codes already. How can I get the grid to render it?
The data can look like this:

<ul><li>Includes 18.5” (47 cm) toilet seat</li><li>Fits most elongated bowl toilets including American Standard, Kohler, Crane, and more</li><li>Durable plastic construction won’t scratch, wear down, or stain</li><li>Whisper-Close lid ensures the lid will never slam</li><li>Sta-Tite mounting system prevents seat from getting loose</li><li>Easy installation</li><li>1 Year limited warranty</li></ul>

My code is set to use a TemplateRenderer, but it doesnt’ render the above sample as html, it shows the codes. How can I get it to not show codes?

productGrid
				.addColumn(TemplateRenderer.<Product>of("<div style='white-space:normal'><p>[[item.description]
]</p></div>")
						.withProperty("description", Product::getLongDescription))
				.setHeader("Description").setFlexGrow(1);

edit: the code from the db literally shows the html codes. It needs to be rendererd as formatted text like this textbox on this site does :slight_smile:

2

Hi Armando, as discussed, we were quite close. so still use the innerHTML daba binding. but instead of innerHTML=‘[[item.description]
]’, it should be inner-H-T-M-L=‘[[item.description]
]’

3

Thanks, that does show the text now but shows it with the tags as well. I also tried a polymer template like below:

<dom-module id="details-view">
    <template>
            <div id="description">Description: [[description]
]</div>
    </template>
    <script>
        class DetailsView extends Polymer.Element {
            static get is() {
                return 'details-view'
            }
        }
        customElements.define(DetailsView.is, DetailsView);
    </script>
</dom-module>

and the backing class that extends PolymerTemplate but that has the same effect of showing the tags.
I wonder if it’s just a problem with my tags in the database?
The answer you post above is supposed to parse the html. Very weird.

Edit: my guess is that it’s because the database stores the alt codes instead of literally the html codes. I should probably parse those first and then use any of the above solutions (because they work if I paste hardcoded html in there, but don’t work if I paste hardcoded html as alt code)

Edit of edit: Ok it was that I needed to replace the Unicodes with actual HTML. I used Apache StringEscapeUtils!

				selectedProduct.setLongDescription(StringEscapeUtils.unescapeHtml(selectedProduct.getLongDescription()));

At least I learned many different ways of doing this

4

So the problem is that you have to first decode the String you stored in the db. You can use StringEscapeUtils.unescapeHtml to decode.

So the getDescription method should actually return the decoded string, like StringEscapeUtils.unescapeHtml(string-in-the-db)

StringEscapeUtils is from Apache commons, you can add the dependency in case not included yet in your project.

5

yep that was the problem. It’s solved now :smiley:
Thanks!

6

For the record, it also works fine from within a polymer template:

    <template is="dom-repeat" items="[[sections]
]" as="section">
     <h4>[[section.title]
]</h4>
     <p inner-h-t-m-l="[[section.content]
]"></p>
    </template>

and

      List<Section> sections = new ArrayList<>();
      sections.add(new Section("What to bring",
            "<strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
      getModel().setSections(sections);