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

To add a new row form at the bottom of the Kendo UI for Angular Grid instead of the top, you can use a combination of the Kendo Grid's built-in features like kendoGridAddRow, editable property, and custom CSS.

Here's how you can achieve it:

1. Enable Edit Mode: Set the editable property of the Kendo Grid to 'inline' or 'popup' to enable inline editing or popup editing mode.

2. Add Row at the Bottom: By default, when you enable editing, the new row form appears at the top of the grid. To move it to the bottom, you can use the kendoGridAddRow directive.

3. Customize CSS: Apply custom CSS to position the new row form at the bottom of the grid.

Here's a code example:

htmlCopy code
<kendo-grid [data]="gridData" [height]="400" [resizable]="true" [sortable]="true" [pageable]="true" [groupable]="true" [filterable]="true" [editable]="'inline'">
  <!-- Define the columns -->
  <kendo-grid-column field="ProductID" title="Product ID" width="100"></kendo-grid-column>
  <kendo-grid-column field="ProductName" title="Product Name" width="250"></kendo-grid-column>
  <kendo-grid-column field="UnitPrice" title="Unit Price" width="100"></kendo-grid-column>
  <kendo-grid-column field="UnitsInStock" title="Units In Stock" width="100"></kendo-grid-column>
  <kendo-grid-column field="Discontinued" title="Discontinued" width="100"></kendo-grid-column>
  
  <!-- Add the new row form at the bottom -->
  <ng-template kendoGridToolbarTemplate>
    <button kendoGridAddRow>Add New Row</button>
  </ng-template>
</kendo-grid>

<!-- Custom CSS to position the new row form at the bottom -->
<style>
  /* Move the new row form to the bottom of the grid */
  .k-grid-content {
    display: flex;
    flex-direction: column-reverse;
  }
</style>

In this example, we use the kendoGridAddRow directive to add the "Add New Row" button in the grid toolbar. When the button is clicked, a new row form will appear at the bottom of the grid due to the custom CSS.

By setting the display property of the .k-grid-content to flex and using flex-direction: column-reverse, the new row form will appear at the bottom of the grid, and the rest of the rows will be displayed above it.

With this setup, you should have the new row form at the bottom of the Kendo UI for Angular Grid, allowing users to add new rows conveniently.