Documentation:Render data as html

Render data as html

This page was created by Hans.karlsen on 2018-09-30. Last edited by Wikiadmin on 2026-07-29.

You can render trusted HTML stored in a ViewModel column as browser HTML instead of escaped text; use this for administrators, content editors, and developers who need data-bound rich content.

Render HTML from a ViewModel column

By default, a column value is displayed as text. For example, a value of <strong>Important</strong> is shown with its tags rather than as bold text.

Set the column's DataIsHtml tagged value to make the renderer pass its value to the browser as HTML. The value remains data-bound, so a changed column value updates the rendered content.

This setting is intended for HTML that you control or explicitly trust. In AngularJS, HTML rendering requires a trusted-HTML binding because AngularJS applies Strict Contextual Escaping (SCE).

Configure the column

In MDriven Designer, add or select the column whose value contains the HTML.
Set the column property IsStatic to True.
Add the tagged value DataIsHtml and set its value to True.
Set the column expression to return the HTML string, Blob content, or a string assembled from your data.
Run the ViewModel and verify that the browser renders elements rather than displaying the markup.

When adding the tagged value in MDriven Designer, use the refresh option in the tagged-value editor if the available tags are not shown. The editor filters the available tags for the selected model element.

Example: render editor-managed content

A content editor can store HTML created with an HTML editor such as TinyMCE in a Blob field. Point a static column with DataIsHtml=True to that field. The stored HTML is then rendered in the page, and later changes to the data are reflected in the rendered page.

For example, if the column value is:

<div class="notice"><strong>Service update</strong><p>The service is available.</p></div>

The page renders a div, bold heading, and paragraph. Without DataIsHtml=True, it displays the tags as text.

For the column-level feature and additional use cases, see Documentation:Column.DataIsHtml.

Build HTML from data

You can return an HTML string from a column expression and combine fixed markup with data values. This is useful for small visual indicators, diagrams, or custom content inside a cell.

For example, the following expression returns a div followed by the value of Attribute2:

'<div class="tk-data-table__cell NewStyle1">Halloj</div>'+self.Attribute2

With DataIsHtml=True, the div is interpreted as HTML. The NewStyle1 class can refer to a style defined in the model through StylesInModel functionality. Define the visual rules in the model instead of embedding all styling in the generated HTML.

Keep generated markup small and structured. For example, use a column to generate a status indicator or a cell fragment; use a dedicated template or component when the layout becomes a substantial page section. See HowTos:Styling and CSS for Bootstrap, Angular and MVC for styling guidance.

Renderer implementation

The model configuration is the same, but the rendering implementation differs by UI technology.

Renderer	Required rendering approach	Example
Razor	Render the normal bound value as raw HTML.	`Html.Raw(<normal bind>)`
AngularJS	Inject `$sce`, create a filter that marks the value as trusted HTML, then bind it with `ng-bind-html`.	rawHtml"></div>

Razor

In Razor, render the normal binding with Html.Raw:

Html.Raw(<normal bind>)

AngularJS

AngularJS uses the $sce service for Strict Contextual Escaping. Add a filter that returns the value as trusted HTML:

.filter('rawHtml', ['$sce', function($sce) {
  return function(val) {
    return $sce.trustAsHtml(val);
  };
}]);

Bind the column identifier through that filter:

<div ng-bind-html="<normal identifier> | rawHtml"></div>

Replace <normal bind> and <normal identifier> with the binding generated for the relevant ViewModel column.

Choose the right HTML feature

Use column HTML rendering when the HTML is the value of a ViewModel column and must be displayed as part of a page. Do not use it as a replacement for report generation or page caching.

Need	Use
Display trusted, data-bound HTML in a page or table cell	This page and Documentation:Column.DataIsHtml
Merge a ViewModel into an XHTML or XML template and produce report content	Documentation:HtmlReport
Generate or open OpenDocument-based output	Documentation:OpenDocument
Serve previously captured page HTML for faster loading	Documentation:InstantPageLoader
Render a ViewModel through MVC without Turnkey	Documentation:Render MVC ViewModel without turnkey

Contents