I need to add empty last row to Kendo UI grid by default in edit mode. I am getting data from api and If I try to add empty row at last its getting called first and api is getting called after.How can I do it.I don't want to have set timeout. I tried adding empty record in data source but for that I need to do so many things
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()
Try using dataSource's requestEnd event. You can add an empty row at the end of your data list:
<!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>