Question

我的Kendo UI Grid看起来像这样::

<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。然后重新排列tr中的所有tbody，以使“添加”行位于最后。 setTimeout可以确保元素已呈现。没有它，querySelector只会返回null。

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

Angular2 Grid的Kendo UI：在底部而不是列表顶部添加行表单

1 个答案: