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:

http://blog.htmltreegrid.com/post/How-to-add-custom-interactive-html-from-a-labelFunction.aspx

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)