Search code examples
razorkendo-uikendo-asp.net-mvcrichtext

Can I Set Encoded to False on a field of a Kendo Template for Kendo ListView?


Can I Set Encoded to False on a field of a Kendo Template for Kendo ListView? Here I have a grid over a list. As you can see in the list the rich text is being diaplayed as HTML where as in the Grid where enocding is set to False the RIch text is being displayed as text. Can I set encoding to false on the field I want ( Comment ) in the ListView? If not what are my options as I was unable to render an editor in the Kendo template... EDIT: Goal is to remove Grid I want the list only.

               @(Html.Kendo().Grid<WorkflowItemCommentModel>()
                .Name("Grid")
                .Columns(columns =>
                {
                    columns.Bound(e => e.Comment).Width(300).Encoded(false);

                })
                .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("CommentsRead", "WFItem").Data("getWorkflowItemID"))

                    )
                                )
                    <div class="col-sm-2"></div>
                    <div id="comments-list" class="col col-sm-10">

                        @(Html.Kendo().ListView<WorkflowItemCommentModel>()
                .Name("CommentList")
                .TagName("div")

                .Events(e => e.DataBound("onCommentListDataBound").Change("onCommentCriteriaChange"))
                .ClientTemplateId("itemCommentTemplate")
                .DataSource(dataSource =>
                {
                    dataSource.Read(read => read.Action("CommentsRead", "WFItem").Data("getWorkflowItemID"));
                    dataSource.Sort(sort => { sort.Add(f => f.CreatedDate); }).ServerOperation(false);
                })
                .Selectable(s => s.Mode(ListViewSelectionMode.Single))
                        )

Template:

    @*//WFITEM COMMENT TEMPLATE*@
<script type="text/x-kendo-tmpl" id="itemCommentTemplate">
    <div class="step">
        <div class="step-wrapper">
            <dl class="step-list-details">
                <dt class="name"><b>Name:</b>#:CreatedByUserName#  <b>Date:</b> #:CreatedDate#</dt>
                <dd class="stepNum">
                    <b>Comment:</b>
                    <div contenteditable="true">
                        #:Comment#
                    </div>
                </dd>

                <dd class="title">
                    <b>Internal Comment:</b>  #:InternalComment#
                </dd>
                <dd class="stepStatus">Status: Status Test</dd>
            </dl>
            <div class="btn btn-primary" id="viewStep">View</div>
        </div>
    </div>
</script>

I want my list text to render as it does in the grid with encoding set to false:

enter image description here


Solution

  • Yes, you can use #=Comment# to force the template to not encode the output. See this example from the documentation:

    <div id="example"></div>
    <script>
        var template = kendo.template("<div id='box'>#= firstName #</div>");
        var data = { firstName: "<b>Todd</b>" }; //Data with HTML tags
        var result = template(data); //Pass the data to the compiled template
        $("#example").html(result); //display "Todd" in a bold font weight
    </script>
    

    Be aware that this might expose your site to a cross-site scripting (XSS) vulnerability. At the very least, you will probably want to ensure that the data doesn't contain any <script> tags.