为什么KendoUI网格要在网格的开头添加一行，而不给用户使用rowindex选择？

Question

我现在到处使用KendoUi网格，需要一些帮助。

当我的Kendo网格第一次加载时，我希望用户有行和一个空行在底部而不是顶部，以表明他们可以添加数据。我不想使用内置的 "添加行按钮"。我有以下内容

试试1

$(document).ready(function () 
{
    var grid = $("#grid").data("kendoGrid");
    grid.addRow();
    $(".k-grid-edit-row").appendTo("#grid tbody");  
}

这应该是移动行到网格的底部，但它没有，它仍然在顶部？

试试2 我也试着做一些类似

        var newRow = { field: "FirstName", Value: "" };
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.add(newRow);

这也不行。

试试3

但这次的尝试，我不知道是否有一个 "加载 "与Kendoui网格，我知道有一个键下，等等。

 grid.tbody.on('load', function (e) 
 {               
    if ($(e.target).closest('tr').is(':last-child')) 
    {
        setTimeout(function () 
        {                      
            var totalrows = grid.dataSource.total();
            var data = grid.dataSource.data();
            var lastItem = data[data.length - 1];
            if (typeof lastItem !== 'undefined') 
            {
                if (lastItem.FirstName.trim() != "")
                   grid.addRow();

            }               
        })
    }
 }

任何帮助将是巨大的。

完整的实现细节如下。

首先，我添加了数据源，这是一个简单的实现。

          var data = $scope.userdetails;
            var dataSource = new kendo.data.DataSource({            
                transport: {
                    read: function (e) {
                        e.success(data);
                    },
                    update: function (e) {
                        e.success();
                    },
                    create: function (e) {
                        var item = e.data;
                        item.Id = data.length + 1;
                        e.success(item);
                    }
                },
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            FirstName: { type: "string" }
                        }
                    }
                }
            });

然后我定义了网格

            let grid = $("#grid").kendoGrid({
                dataSource: dataSource,
                scrollable: false,
                navigatable: true,
                editable: {
                    createAt: "bottom"
                },
                dataBound: function (e) {
                    e.sender.tbody.find(".k-grid-Delete").each(function (idx, 
                    element) {
                        $(element).removeClass("k-button");
                    });
                },
                columns: [
                    {
                        field: "FirstName", title: "First Name"
                    },
                    {
                        command: [{ name: "Delete", text: "", click: $scope.delete, 
                   className: "far fa-trash-alt fa-fw" }],
                        title: " ",
                        width: "100px",
                        attributes: { class: "k-grid-column-text-centre" }
                    }
                ]

            }).data("kendoGrid");

我做了下面的处理，只在用户点击tab的最后一行单元格时添加空白行，但也想在页面第一次加载时用网格添加空白。

            grid.tbody.on('keydown', function (e) {
                i`enter code here`f (e.keyCode == 9) {                
                    if ($(e.target).closest('tr').is(':last-child')) {
                        setTimeout(function () {                        
                            var totalrows = grid.dataSource.total();
                            var data = grid.dataSource.data();
                            var lastItem = data[data.length - 1];
                            if (typeof lastItem !== 'undefined') {
                                if (lastItem.FirstName.trim() == "")
                                    return;
                            }
                            grid.addRow();
                        })
                    }
                }
            });

这段代码仍然是在网格的顶部添加行，而不是在底部。

$(document).ready(function () {
       var newRow = { field: "FirstName", Value: "" };       
        grid.dataSource.add(newRow);
        grid.editRow($("#grid tr").last());
}

我没有在其他地方添加行。

Answer 1

你尝试＃2是正确的方式去。它可能在底部添加了一行，对吗？所以你只需要在程序上编辑一下就可以了。

var newRow = { field: "FirstName", Value: "" };
var grid = $("#grid").data("kendoGrid");
grid.dataSource.add(newRow);
grid.editRow($("#grid tr").last());

---

演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
  let grid = $("#grid").kendoGrid({
    toolbar: ["save"],
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
     data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
     ],
     schema:{
      model: {
       id: "id",
       fields: {
         age: { type: "number"}
       }
      }
     }
    },
    editable: true
  }).data('kendoGrid');
  
  grid.dataSource.add({});
	grid.editRow($("#grid tr").last());
</script>
</body>
</html>

道场

如果有人使用内置的方法，只需使用 editable.createAt 参数。