As most of you know, the HTML TreeGrid allows you to embed custom HTML content within the cells in a very conveinient manner. This can be just pure HTML, or interactive HTML as described in this blog post:

What this allows you to do, is to return any HTML in string format and the grid will render it in the cells. With this convenience, comes a limitation - if you have special characters you want to render, they get converted to HTML and are not rendered as text. Today, a customer reached out with a query about how to handle scenarios where you want to show special characters but not render any custom HTML. The solution is to use a special item renderer:

(function () {

    "use strict";

    var EncodedItemRenderer;

    EncodedItemRenderer = function (tag) {


        flexiciousNmsp.Label.apply(this, [tag]);


    flexiciousNmsp.EncodedItemRenderer = EncodedItemRenderer; //add to name space

    EncodedItemRenderer.prototype = new flexiciousNmsp.Label(); //setup hierarchy

    EncodedItemRenderer.prototype.typeName = EncodedItemRenderer.typeName = "EncodedItemRenderer";//for quick inspection

    EncodedItemRenderer.prototype.getClassNames = function () { //for support of "is" keyword

        return ["UIComponent", this.typeName];


    EncodedItemRenderer.prototype.setText = function (val) {

             this.domElement.textContent = val;





And attached is a running example:


test.html (4.51 kb)