Kendo UI sortable template rendering incorrectly - kendo-ui

Question

In this plunk I have two tables, the first one displays the data using *ngFor, and the second shows the same data but using kendo-sortable and a template. The sortable function works fine, but there are two problems. First, all the data are below the first column. Second, the index variable is undefined. Any ideas how to fix this?
#Component({
selector: 'my-app',
template: `
WITHOUT kendo-sortable
<table border="1">
<tr>
<td><b>Index</b></td>
<td><b>First Name</b></td>
<td><b>Last Name</b></td>
</tr>
<tr *ngFor="let item of items; let i = index">
<td style="width:50px">{{ i }}</td>
<td style="width:100px">{{ item.firstName }}</td>
<td style="width:100px">{{ item.lastName }}</td>
</tr>
</table>
<br><br>
WITH kendo-sortable
<table border="1">
<tr>
<td><b>Index</b></td>
<td><b>First Name</b></td>
<td><b>Last Name</b></td>
</tr>
<kendo-sortable [data]="items">
<ng-template let-item="item" let-rowIndex="i">
<tr>
<td style="width:50px">{{ i }}</td>
<td style="width:100px">{{ item.firstName }}</td>
<td style="width:100px">{{ item.lastName }}</td>
</tr>
</ng-template>
</kendo-sortable>
</table>
`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
public items = [ {firstName: 'Joe', lastName: 'Don'},
{firstName: 'Jane', lastName: 'Dona'},
{firstName: 'Julius', lastName: 'Kent'}];
}

Answer 1

I changed the code a lot, so take a look at this:
import { Component } from '#angular/core';
import { products } from './products';
import { GridDataResult } from '#progress/kendo-angular-grid';
import { SortDescriptor, orderBy } from '#progress/kendo-data-query';
#Component({
selector: 'my-app',
template: `
<kendo-grid [data]="gridView" [height]="530>
<kendo-grid-column field="Index" title="Index" width="80"></kendo-grid-column>
<kendo-grid-column field="FirstName" title="First Name"></kendo-grid-column>
<kendo-grid-column field="LastName" title="Last Name" width="230"></kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
public gridView: GridDataResult;
public products: any[] = products;
constructor() {
this.loadProducts();
}
private loadProducts(): void {
this.gridView = {
data: orderBy(this.products, this.sort),
total: this.products.length
};
}
}
Here you define the products in an external file and import them, this is the source for that. By doing what the ducumentation suggests, it might work for you :) Good luck!