1

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'}];
}

1 Answer 1

0

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!

2
  • that solution applies to jQuery, not Angular
    – ps0604
    Aug 9, 2018 at 22:48
  • You are right, it does. It was intended as an alternative to your approach, because I didn`t find the solution to the problem with angular, sorry :)
    – Stephan T.
    Aug 10, 2018 at 5:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.