šŸš€ Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
Render data as html
(Adding message template to the top of the page)
(Replacing message template with parser tag)
Line 1: Line 1:
{{message|Write the content here to display this box}}
<message>Write the content here to display this box</message>
If your data contains [https://www.w3schools.com/html/html_intro.asp HTML] markup and you want the browser to render the HTML, do this:<blockquote>Column: <code>IsStatic = True</code> , TaggedValue: <code>DataIsHtml=True</code></blockquote>
If your data contains [https://www.w3schools.com/html/html_intro.asp HTML] markup and you want the browser to render the HTML, do this:<blockquote>Column: <code>IsStatic = True</code> , TaggedValue: <code>DataIsHtml=True</code></blockquote>



Revision as of 07:54, 17 June 2024

This page was created by Hans.karlsen on 2018-09-30. Last edited by Stephanie on 2025-02-24.

If your data contains HTML markup and you want the browser to render the HTML, do this:

Column: IsStatic = True , TaggedValue: DataIsHtml=True

Implementation

In Razor, the implementation uses:

Html.Raw(<normal bind>)

In AngularJS, it is more complex due to security concerns:

  • You must inject service $sce. $sce is a service that provides Strict Contextual Escaping services to AngularJS.
  • You must also use a filter to say that data is trusted as HTML:
.filter('rawHtml', ['$sce', function($sce)
{  
  return function(val) {    return $sce.trustAsHtml(val);  }; 
}]);

You then bind like this:

<div ng-bind-html="<normal identifier> | rawHtml"></div>
2018-09-30 10h50 56.png
Getting Arbitrary Data and Display into Table Cells

Set the DataIsHtml and send out HTML in the cell expression as a string:

'<div class="tk-data-table__cell NewStyle1">Halloj</div>'+self.Attribute2
2020-03-23 08h33 26.png

Make use of the new StylesInModel functionality and reference styles you define in the model:

Result:

2020-03-23 08h36 49.png
MDriven Chat

How would you like to chat today?

Setting up your conversation…

This may take a few moments