默认情况下，我需要在编辑模式下将空的最后一行添加到 Kendo UI 网格。我正在从 api 获取数据，如果我尝试最后添加空行，它首先被调用，然后 api 被调用。我该怎么做。我不想设置超时。我尝试在数据源中添加空记录，但为此我需要做很多事情var dataSource = new kendo.data.DataSource({ type: "odata", serverPaging: false, serverSorting: false, serverFiltering: false, //pageSize: 20, schema: { data: function (data) { var resultData = []; if (data.value != null && data.value[0].Payload != null && data.value[0].Payload != "[]") resultData = JSON.parse(data.value[0].Payload); return resultData; }, total: function (data) { var length = 0; if (data.value != null) length = data.value[0].PayloadCount; return length; }, model: { id: that.gridProperties.PrimaryKeyName, fields: that.gridProperties.Schema } }, change: that.onGridDataChanged, transport: { read: { url: that.gridProperties.DataSourceURL, contentType: "application/json; charset=utf-8", type: "GET", dataType: "json" } } });
2 回答
慕标5832272
TA贡献1966条经验 获得超4个赞
您可以使用 requestEnd 设置数据源，以在网格行数据的末尾添加一个空行。
dataSource: {
type: "GET",
dataType: "json",
transport: {
read: "url"
},
requestEnd: function(e) {
e.response.d.results.push({Field: ''});
}
}
此外，这会导致空单元格的行为不同并且高度较小，您可以通过添加以下 css 来解决这个问题。
.k-grid tr{height: 33px;}
临摹微笑
TA贡献1982条经验 获得超2个赞
尝试使用 dataSource 的requestEnd事件。您可以在数据列表的末尾添加一个空行：
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/remote-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/2020.3.1118/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
},
requestEnd: function(e) {
e.response.d.results.push({CategoryName: ''});
}
},
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [
"CategoryName"
]
});
});
</script>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消