angular - Angular2 网格的 Kendo UI : add row form on bottom instead of top of list

Question

我的 Kendo UI 网格看起来像这样::

<kendo-grid [data]="gridData" #grid (edit)="onGridRowEdit($event)" (cancel)="onGridRowCancel($event)" (save)="onGridRowUpdate($event)" (remove)="onGridRowRemove($event)" (add)="onGridRowAdd($event)" noRecords=" " max-height="400"
    <kendo-grid-column field="Id" [title]="'ID' | translate:lang" width="80">
        <ng-template kendoGridCellTemplate let-dataItem>
            <span *ngIf="dataItem.Id">#{{dataItem.Id}}</span>
        </ng-template>

        ...

        <kendo-grid-command-column>
            ...
        </kendo-grid-command-column>
    </kendo-grid>

网格本身工作得非常好。但是，当我添加新行时，即使该行本身在保存后添加到底部，该行的表单也会添加到表格的顶部。这很令人困惑，因为保存时该行消失并重新出现在底部。

我还没有找到一种方法来告诉网格在列表末尾显示表单。这可能吗？

Answer 1

基于 DOM 的解决方案，似乎工作正常。看看here .

这个想法是像这样修改添加处理程序:

  public addHandler(): void {
    this.closeEditor();

    this.formGroup = createFormGroup({
      Discontinued: false,
      ProductName: "",
      UnitPrice: 0,
      UnitsInStock: ""
    });
    this.isNew = true;
    this.grid.addRow(this.formGroup);

    //                //
    //           |    //
    //  My code  |    //
    //           V    //
    //                //
    setTimeout(() => {
      const addRowElement = document.querySelector(".k-grid-add-row");
      const tbody = addRowElement.parentElement;
      tbody.children[0].remove();
      tbody.insertAdjacentElement('beforeend', addRowElement);
    }, 0);
  }

它选择新创建的tr。然后重新排列 tbody 中的所有 tr ，使“add”行位于最后。 setTimeout 用于确保元素已渲染。如果没有它，querySelector 只会返回 null。

在您的示例中，在 onGridRowAdd 函数中的其他所有内容之后添加 setTimeout，您应该会很顺利。