CODEWITHSUNDEEP
kendo-uitelerikkendo-asp.net-mvctelerik-mvckendo-treelist
Saravanan Sachi
Saravanan Sachi

Reputation: 2612

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

Upvotes: 0

Views: 605

Answers (1)

J&#246;rgen Moen
J&#246;rgen Moen

Reputation: 343

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>

Upvotes: 1

Related Questions