具有多行文本的 Kendo MVC UI TreeList答案

【问题标题】：Kendo MVC UI TreeList with multi-line text具有多行文本的 Kendo MVC UI TreeList
【发布时间】：2019-10-30 16:38:50
【问题描述】：

我将文本区域作为 EditorTemplate (StringTextArea.cshtml) 添加到 TreeList。

@model string

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

模型类

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

TreeList 在编辑模式下添加文本区域，我将 LvlType 中的“\n”替换为“ ”，然后将其保存到 SQL Server 2008

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

但它在 TreeList 中按原样显示字符串。

有没有办法让 TreeList 显示带有换行符的字符串？

谢谢

【问题讨论】：

我的猜测是文本在呈现之前已经被编码，所以我会替换“ ”在树列表中显示时使用“
”！
谢谢，但它显示“Data1 Data2”不带换行符
不要替换保存到数据库的get，在显示之前转换它！
奇怪！而你正在替换 
不是相反？，我必须建立一个测试项目；）

标签： kendo-ui telerik kendo-asp.net-mvc telerik-mvc kendo-treelist

【解决方案1】：

我替换编码的  的第一个想法实际上是让它变得比它必须的更复杂:(。

最好的解决方案是制作一个模板：模板：“#=LvlType#”

使用 # = # 时不会编码，使用 # : # 时会编码！我的测试：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>

【讨论】：

在 DB 中，它被存储为 D1
D2
D3 和 ....Template("#=LvlType#")，有效。非常感谢。
如果您正在使用 Kendo UI MVC TreeList 小部件并且想要硬编码列标题以在其中包含
元素，您可以使用 HeaderTemplate。假设我希望标题为“Something
about
nothing”，我会将 .HeaderTemplate("Something
about
nothing") 添加到列定义中。