默认情况下如何将空的最后一行添加到 Kendo Ui 网格答案

【问题标题】：How to add empty last row to Kendo Ui grid by default默认情况下如何将空的最后一行添加到 Kendo Ui 网格
【发布时间】：2020-12-02 13:13:53
【问题描述】：

默认情况下，我需要在编辑模式下将空的最后一行添加到 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()

【问题讨论】：

默认情况下没有魔法，网格渲染行不是想象的有它渲染的数据源所以添加到数据源。即使您使用按钮添加新行，它也会作为空行进入您的数据源。
dojo.telerik.com/AJIrafaR

标签： javascript jquery kendo-ui kendo-grid kendo-ui-grid

【解决方案1】：

您可以使用 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】：

尝试使用 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>

Demo

【讨论】：