如何固定剑道网格行的高度答案

【问题标题】：How to fix height of row of kendo grid如何固定剑道网格行的高度
【发布时间】：2017-06-16 04:53:08
【问题描述】：

在我的 Kendo Grid 中，我有一列包含 html 值。在显示时会增加该网格的高度行。

无论值是多少，我如何确保数据将显示在单行中。

单击here 获取小提琴。

$("#grid").kendoGrid({
  columns: [
    { title: "Name", field: "name", encoded: false }
  ],
  dataSource: [ { name: "<br>Jane Doe</br><br>Lespie Knope</br><br>Ron Swanson</br>" } ]
});

.k-grid tbody tr {
        width: 50px;
    }

    .k-grid td {
        white-space: nowrap;
    }

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
    
    <div id="grid"></div>

【问题讨论】：

您希望如何显示数据？喜欢这个Jane Doe, Lespie Knoper, Ron Swanson？
你试过没有休息吗？ htmlname: "Jane Doe, Lespie Knope, Ron Swanson"
我不想更改数据。我只想向用户显示第一行。
这只是一个例子。在本专栏的现实生活场景中，我有完整的 html 代码，例如电子邮件模板。

标签： javascript css kendo-grid kendo-asp.net-mvc

【解决方案1】：

终于可以使用模板解决问题了。

$("#grid").kendoGrid({
  columns: [
    { title: "Item", field: "item", template: "<div style='height: 25px;'>#= item # </div>" }
    , { title: "Name", field: "htmlname", template: "<div style='height: 25px; overflow-y:scroll;'>#= htmlname # </div>" }        
  ],
  dataSource: [ { item: "11MPRICE", htmlname: "Jane Doe<br>Lespie Knope</br><br>Ron Swanson</br>" }
              ]
});

查看道场here。

【讨论】：