Kendo UI Angular如何在表格底部添加新行？是否有类似jQuery的createAt选项？

嗨，刚好我对Kendo UI Angular的Grid组件比较熟悉，来给你捋清楚这个问题：

首先明确一点：完全不需要DOM操作！Kendo UI Angular的组件是基于Angular的数据绑定理念设计的，和jQuery那种直接操作DOM的思路完全不同，咱们用数据驱动的方式就能轻松实现需求，而且这也是框架推荐的最佳实践。

核心思路 #

Kendo Grid的渲染完全依赖绑定的数据源，只要你更新数据源，表格就会自动同步渲染结果。要在底部添加新行，只需要把新创建的数据对象追加到数据源数组的末尾即可，根本不用碰DOM元素。

具体实现示例 #

这里给你一个简单的代码示例，帮你快速理解：

组件模板

<button (click)="addNewRow()">Add New</button>
<kendo-grid [data]="gridData">
  <kendo-grid-column field="id" title="ID"></kendo-grid-column>
  <kendo-grid-column field="productName" title="Product Name"></kendo-grid-column>
  <kendo-grid-column field="price" title="Price"></kendo-grid-column>
</kendo-grid>

组件类代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-grid',
  templateUrl: './product-grid.component.html'
})
export class ProductGridComponent {
  // 初始化表格数据源
  public gridData = [
    { id: 1, productName: 'Laptop', price: 999 },
    { id: 2, productName: 'Mouse', price: 25 }
  ];

  addNewRow() {
    // 创建新的空行数据（根据你的业务模型定义结构）
    const newProduct = {
      id: this.gridData.length + 1,
      productName: '',
      price: 0
    };
    // 把新数据追加到数组末尾，触发表格更新
    // 这里用扩展运算符创建新数组，是为了触发Angular的变更检测
    this.gridData = [...this.gridData, newProduct];
  }
}

补充说明 #

1. 如果你用的是带分页、排序或过滤的Grid（比如使用GridDataResult和process方法），只需要在更新数据源后重新处理分页逻辑即可，核心还是操作数据数组。
2. 对比jQuery的createAt：Kendo Angular里没有直接对应的配置项，因为框架的设计思路就是数据驱动，而非DOM操作。这种方式更符合Angular的组件化理念，也让代码更易维护。
3. 如果需要编辑新行的功能，可以结合Kendo Grid的inline编辑模式，调用addRow方法时同样可以通过控制数据源位置来让新行出现在底部。

这样操作下来，点击“Add New”按钮时，新行就会自动出现在表格底部啦～

内容的提问来源于stack exchange，提问作者the_best