Angular 2 - Kendo UI grid. Issue with sort implementation

Question

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

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

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.

risk-list.component.ts

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 => this.risks = risks);

    }

    ngOnInit(): void {
        this.getRisks();
    }
};

risk-list.component.html

<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)">
    <kendo-grid-column field="reference" title="Reference" width="120">
    </kendo-grid-column>
    <kendo-grid-column field="insuredName" title="Insured Name" width="120">
    </kendo-grid-column>
    <kendo-grid-column field="inceptionDate" title="Inception Date" width="120">
    </kendo-grid-column>
    <kendo-grid-column field="riskType" title="Risk Type" width="120">
    </kendo-grid-column>
    <kendo-grid-column field="status" title="Indication" width="120">
    </kendo-grid-column>
    <kendo-grid-column field="grossPremium" title="Gross Premium" width="120">
    </kendo-grid-column>
    <kendo-grid-column field="allocatedTo" title="Allocated To" width="120">
    </kendo-grid-column>
    <kendo-grid-column field="allocatedCompany" title="Allocated Company" width="120">
    </kendo-grid-column>
    <kendo-grid-column field="Discontinued" width="100">
        <template kendoCellTemplate let-dataItem>
            <input type="checkbox" [checked]="dataItem.Discontinued" disabled />
        </template>
    </kendo-grid-column>
</kendo-grid>

risk.service.ts

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<Risk[]> {
        return Promise.resolve(Risks);
    }

}

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 — Tom
– Tom, Commented Oct 23, 2016 at 9:52
Most likely error due to variable data in your component. Try renaming data from this line- private data: any[] — Sanket
– Sanket, Commented Oct 23, 2016 at 11:05
How does that help. If i rename , then it complains there is no variable data in the code following. If I create a another variable that is data1 fr example like this data: this.data.slice(this.skip, this.skip + this.pageSize), data1: orderBy(this.risks, this.sort), then I get error message Type {'data:any[];data1:Risk[];total:number;}' is not assignable to type GridDataResult. Object literals may only specify known properties and Data1 does not exist in type GridDataResult — Tom
– Tom, Commented Oct 23, 2016 at 11:27

emp · Accepted Answer · 2016-10-25 08:17:40Z

3

The error means that you cannot have duplicate properties like you have in your loadRisks method. Look at the duplicate data property here in your object.

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

You should merge those expressions or create a function that returns the data value you need. An example could be:

private loadRisks(): void {
    this.gridView = {
        data: this.handleData(),
         total: this.data.length
    };
}

private handleData() {
    var pagedData = this.data.slice(this.skip, this.skip + this.pageSize)
    if (!this.sort) { return pagedData; }

    var orderedAndPagedData = orderBy(pagedData, this.sort);
    return orderedAndPagedData;
}

Plunkr: http://plnkr.co/edit/ZtaExNxX9eOQrCzYwO1N?p=preview

edited Oct 25, 2016 at 8:17

answered Oct 24, 2016 at 9:24

emp

5,0962 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tom Over a year ago

I understand thats the reason. My question is how do I merge that expression

Tom Over a year ago

Thanks for sharing the your implementation. I can see that it is working for you on plunker but unfirtunately it doesnt work for me. When I click on the sort arrows it does nothing. I believe there is some issue with the binding. Not sure what the problem is

emp Over a year ago

I can see that you are working with risks and data objects. You should consider only using one object. You're missing something obvious as the plunkr proves the concept :-)

Tom Over a year ago

I have tried to use just the data object but that lands up in an error. I dont see any data on the grid. I have updated the post to include the service class. Could you let me know what the problem could be

emp Over a year ago

if you can reproduce it in a plunkr, I will have a look

|

Asif Ghanchi · Accepted Answer · 2019-08-08 12:14:39Z

0

instead of using [data]="risks" use [kendodatagrid]="risks"

edited Aug 8, 2019 at 12:14

answered Aug 8, 2019 at 12:05

Asif Ghanchi

2243 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular 2 - Kendo UI grid. Issue with sort implementation

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related