Kendo MVC UI TreeList with multi-line text
Question
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.
Is there any way to make the TreeList to display the string with line breaks?
Thanks
1 answers
solution1
0 ACCPTED 2019-06-18 15:03:47
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.