我的 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>
网格本身工作得非常好。但是,当我添加新行时,即使该行本身在保存后添加到底部,该行的表单也会添加到表格的顶部。这很令人困惑,因为保存时该行消失并重新出现在底部。
我还没有找到一种方法来告诉网格在列表末尾显示表单。这可能吗?
最佳答案
基于 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
,您应该会很顺利。
关于angular - Angular2 网格的 Kendo UI : add row form on bottom instead of top of list,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47689628/