默认情况下如何将空的最后一行添加到 Kendo Ui 网格
默认情况下，我需要在编辑模式下将空的最后一行添加到 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"
}
}
});
MMMHUHU2回答
-
慕标5832272
您可以使用 requestEnd 设置数据源，以在网格行数据的末尾添加一个空行。 dataSource: { type: "GET", dataType: "json", transport: { read: "url" }, requestEnd: function(e) { e.response.d.results.push({Field: ''}); } }此外，这会导致空单元格的行为不同并且高度较小，您可以通过添加以下 css 来解决这个问题。 .k-grid tr{height: 33px;} -
临摹微笑
尝试使用 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>
随时随地看视频慕课网APP
相关分类
JavaScript