Search code examples
kendo-uitelerikkendo-asp.net-mvctelerik-mvckendo-treelist

Kendo MVC UI TreeList with multi-line text

I added text-area as EditorTemplate (StringTextArea.cshtml) to TreeList.

@model string

@(Html.TextAreaFor(m => m, new { @class = "k-input k-textbox" }))

Model class

public class LevelViewModel
{
    public int Id { get; set; }
    public string LvlName { get; set; }
    [UIHint("StringTextArea")]
    public string LvlType { get; set; }
}

TreeList adds text-area in edit mode and I replace '\n' in LvlType to '<br />' before saving it to SQL Server 2008

LvlType = lvl.LvlType.Replace("\n", "<br />")

But it displays the string as it is, in the TreeList.

enter image description here

Is there any way to make the TreeList to display the string with line breaks?

Thanks

Solution

  • My first idea to replace the encoded <br /> was really making it more complicated than it has to be :(.

    Best solution is to make a template: template: "#=LvlType#"

    When using # = # it will not encode, when using # : # it will encode! My test: Telerik dojo

    <html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treelist/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>

</head>
<body>
    <div id="example">
        <div id="treelist"></div>

        <script>
            $(document).ready(function () {
                var dataSource = new kendo.data.TreeListDataSource({
                    data: [
                      { id: 1, Name: "Daryl <br/>Sweeney", Position: "CEO", Phone: "(555) 924-9726", parentId: null },
                    ],

                    schema: {
                        model: {
                            id: "id",
                            expanded: true
                        }
                    }
                });

                $("#treelist").kendoTreeList({
                    dataSource: dataSource,
                    height: 540,
                    columns: [
                        { field: "Position" },
                        { field: "Name", template: "#=Name#" },
                        { field: "Phone" }
                    ]
                });
            });
        </script>
    </div>
</body>
</html>