title: Angular 2 - Kendo UI grid. Issue with sort implementation
body: <p>I am developing an angular 2 app using asp.net in visual studio. The HTML that is rendered is using Kendo UI datagrid. I am trying to implement, scrolling and sorting. The scrolling works perfectly fine. However have issue when trying to implement sorting. I am getting an error </p>
  
  <p>The error is "An object literal cannot have multiple properties with the same name in strict mode. Duplicate identifier Data". This is compile time error</p>
  
  <p>This error refers to data property assignment in the loadRisks() method. I am new to typescript and need some help. How do I assign the order by clause to the datagrid. Could somebody help.</p>
  
  <p><strong>risk-list.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Risk } from './risk';
  import { RiskService } from './risk.service';
  import { GridModule, GridDataResult, PageChangeEvent, SortDescriptor, orderBy } from '@progress/kendo-angular-grid';
  
  @Component({
      moduleId: module.id,
      selector: 'rm-risks',
      templateUrl: '/app/risk-list.component.html',
      providers: [RiskService]
  })
  
  export class RiskListComponent implements OnInit {
      private gridView: GridDataResult;
      private sort: SortDescriptor[] = [];
      private data: any[];
      private pageSize: number = 10;
      private skip: number = 0;
      title = 'Risk List';
      risks: Risk[];
  
      constructor(private _riskService: RiskService) {
          this.data = [];
          this.getRisks();
          this.loadRisks();
       }
  
      protected pageChange(event: PageChangeEvent): void {
          this.skip = event.skip;
          this.loadRisks();
      }
  
      protected sortChange(sort: SortDescriptor[]): void {
          this.sort = sort;
          this.loadRisks();
      }
  
  
      private loadRisks(): void {
          this.gridView = {
              data: this.data.slice(this.skip, this.skip + this.pageSize), 
              data: orderBy(this.risks, this.sort),
              total: this.data.length
          };
      }
  
      getRisks(): void {
          this._riskService.getRisks().then(risks =&gt; this.risks = risks);
  
      }
  
      ngOnInit(): void {
          this.getRisks();
      }
  };
  </code></pre>
  
  <p><strong>risk-list.component.html</strong></p>
  
  <pre><code>&lt;kendo-grid [data]="risks"
              [skip]="skip"
              [pageSize]="pageSize"
              [scrollable]="'virtual'"
              [rowHeight]="36"
              [height]="300"
              (pageChange)="pageChange($event)"
              [sortable]="{ mode: 'multiple' }"
              [sort]="sort"
              (sortChange)="sortChange($event)"&gt;
      &lt;kendo-grid-column field="reference" title="Reference" width="120"&gt;
      &lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column field="insuredName" title="Insured Name" width="120"&gt;
      &lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column field="inceptionDate" title="Inception Date" width="120"&gt;
      &lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column field="riskType" title="Risk Type" width="120"&gt;
      &lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column field="status" title="Indication" width="120"&gt;
      &lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column field="grossPremium" title="Gross Premium" width="120"&gt;
      &lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column field="allocatedTo" title="Allocated To" width="120"&gt;
      &lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column field="allocatedCompany" title="Allocated Company" width="120"&gt;
      &lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column field="Discontinued" width="100"&gt;
          &lt;template kendoCellTemplate let-dataItem&gt;
              &lt;input type="checkbox" [checked]="dataItem.Discontinued" disabled /&gt;
          &lt;/template&gt;
      &lt;/kendo-grid-column&gt;
  &lt;/kendo-grid&gt;
  </code></pre>
  
  <p><strong>risk.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Risk } from './risk';
  import { Risks } from './mock-risk';
  import { Http, Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/observable/from';
  
  
  @Injectable()
  export class RiskService {
  
      getRisks(): Promise&lt;Risk[]&gt; {
          return Promise.resolve(Risks);
      }
  
  }
  </code></pre>