默認情況下如何將空的最后一行添加到 Kendo Ui 網格
[英]How to add empty last row to Kendo Ui grid by default
問題描述
默認情況下，我需要在編輯模式下將空的最后一行添加到 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"
}
}
});
$('#' + that.gridProperties.ControlId).kendoGrid({
height: "100%",
scrollable: true,
filterable: true,
sortable: true,
resizable: true,
pageable: false,
noRecords: true,
editable: that.gridProperties.Editable,
selectable: !that.gridProperties.AllowMultiSelect, //If multiselect is false enable row selection
columns: gridColumns,
dataSource: dataSource,
edit: that.onGridEdit,
// This is required to update the calculated column as soon as user enters/types new values
save: function (e) {
var dataSource = this.dataSource;
that.updateFormulaColumn(e, dataSource);
e.model.one("change", function () {
dataSource.fetch();
});
},
});
var grid = $('#' + that.gridProperties.ControlId).data("kendoGrid");
grid.addRow()
2 個解決方案
解決方案1
1 2021-01-08 17:09:12
您可以使用 requestEnd 設置數據源，以在網格行數據的末尾添加一個空行。
dataSource: {
type: "GET",
dataType: "json",
transport: {
read: "url"
},
requestEnd: function(e) {
e.response.d.results.push({Field: ''});
}
}
此外，這會導致空單元格的行為不同並具有較小的高度，您可以通過添加以下 css 來解決此問題。
.k-grid tr{height: 33px;}
解決方案2
0 2020-12-03 11:58:00
嘗試使用 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>
如何動態地向kendo ui網格添加一行（到其架構）？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.