Kendo UI for Angular2 Grid: add row form on bottom instead of top of list

Question

My Kendo UI Grid looks like this::

<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>

The grid per se works absolutely fine. However, when I add a new row, even though the row itself is added on the bottom after saving it, the row's form is added on top of the table. This is confusing as the row disappears and reappears at the bottom when saving.

I haven't found a way to tell the grid to show the form at the end of the list. Is this even possible?

igg igg · Accepted Answer · 2020-01-14T13:26:07

A DOM-based solution, seems to work OK. Check it out here.

The idea is modifying the add handler like this:

  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);
  }

which selects the newly created tr. And then rearranges all the trs in the tbody so that the "add" row is last. The setTimeout is there to make sure the element has been rendered. Without it, the querySelector just returns null.

In your example, add the setTimeout after everything else in the onGridRowAdd function and you should be golden.

Kendo UI for Angular2 Grid: add row form on bottom instead of top of list

1 Answers