個人情報などのデータがあります。今ではフィールドの1つにこの値があります剣道のように改行したデータがあります
xHistory = "160 \n 180 \n 190"
ここでデータを表示すると、そのままテキストが表示されます。
剣道のグリッドを改行文字として「\ n」にする方法。
dataSource: {
data: myData,
pageable: false
},
columns: [{
field: "xHistory",
title "History",
width: 90
}]
あなたは簡単に"<br>"タグで"\n"文字を置き換えることができ、その関数内の列のテンプレートのプロパティを使用して列をレンダリングするJavaScript関数を使用することができます。ここで
columns: [{
field: "xHistory",
title "History",
width: 90,
template: renderHistoryCol
}]
function renderHistoryCol(model) {
var text = model.xHistory;
text = text.replace(new RegExp("\n", 'g'), "<br>");
return text;
}
はデモ
$(function() {
$("#grid").kendoGrid({
"columns": [{
"field": "id",
"title": "ID"
}, {
"title": "Name",
"field": "name"
}, {
"title": "History",
"field": "xHistory",
"template": renderHistoryCol
}],
"dataSource": {
"data": {
"total": 5,
"data": [{
"id": 1,
"name": "john Deo",
"xHistory": "160 \n 180 \n 190"
}, {
"id": 2,
"name": "john Deo",
"xHistory": "180 \n 300 \n 355"
}, {
"id": 3,
"name": "john Deo",
"xHistory": "355 \n 555 \n 190"
}, {
"id": 4,
"name": "john Deo",
"xHistory": "35 \n 445 \n 123"
}, {
"id": 5,
"name": "john Deo",
"xHistory": "160 \n 180 \n 343"
}]
},
"pageSize": 5,
"schema": {
"data": "data",
"model": {
"fields": [{
"field": "id",
"type": "number"
}, {
"field": "name",
"type": "string"
}, {
"field": "xHistory",
"type": "string"
}]
},
"total": "total"
}
},
"height": 550,
"sortable": true
});
});
function renderHistoryCol(model) {
var text = model.xHistory;
text = text.replace(new RegExp("\n", 'g'), "<br>");
return text;
}<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.material.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1028/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
<div id="grid"></div>