Question

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

如果数值不变，我怎样才能确保数据以单行显示。

点击here获取小提琴。

＆＃13;

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

＆＃13;

.k-grid tbody tr {
        width: 50px;
    }

    .k-grid td {
        white-space: nowrap;
    }

＆＃13;

<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>

＆＃13;

Answer 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。

如何修复剑道网格行的高度

1 个答案: