Display encoded HTML in Kendo UI

Question

I'm using the Kendo UI WYSIWYG editor to input formatted text into a MySQL database using PHP. This bit works fine. I have encoded HTML in my database.

I'm using Kendo UI ListView to output the data from the database. I figured out I needed to use 2 functions to get the proper HTML encoding back:

$row["body"] = stripslashes(html_entity_decode($row["body"]));
$row["body"] = str_replace(" ", " ", $row["body"]);

Now the JSON feed outputs proper HTML (as far as I can see with minimal testing).

The Javascript that takes takes the data from the JSON feed and displays it on the page in the ListView is showing the HTML code now, rather than the encoded HTML code, which is good, but what I'd really like is for it to display the actual formatted text.

I have tried parsing the string through html_entity_decode() a second time, with no luck. I think this is something that has to be done with the JS, but I'm not sure how this can be achieved specifically with Kendo UI, since it is doing all the parsing.

My JS:

$(document).ready(function() {
    var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://dev.openbill.co.uk/admin/crud/viewticket/main.json.php?id=<?php echo $_GET['id']; ?>",
                        contentType: "application/json; charset=utf-8",
                        type: "GET",
                        dataType: "json",
                    }
                },
                schema: {
                    data: "data",
                    total: "total",
                    parse: decode
                },
                serverPaging: true,
                serverSorting: true,
                pageSize: 10,
                page: 1,
            });

    $("#pager").kendoPager({
        dataSource: dataSource
    });

    $("#listView").kendoListView({
        dataSource: dataSource,
        template: kendo.template($("#template").html())
    });
});

Answer 1

Ok fixed this!

For anyone who like me has spent far too long Googling...

In your template, replace:

${body}

With..

#= body #

And it will show formatted HTML

Answer 2

Was looking for the same thing and used #:

With this post I found the answers on the Kendo website:

Template Syntax

Kendo UI Templates use a simple templating syntax we call "hash templates." With this syntax, the "#" (or hash) symbol is used to mark areas in a template that should be replaced with data when the template is executed.

There are three ways to use the hash syntax:

1. Render literal values: #= #
2. Render HTML-encoded values: #: #
3. Execute arbitrary JavaScript code: # if(...){# ... #}#