CODEWITHSUNDEEP
angularkendo-uikendo-grid
A. Gladkiy
A. Gladkiy

Reputation: 3450

Angular 2 Kendo Grid from array of string

I'm developing app with Angular 2 + Kendo UI.

So, I have array of paths to images and I want to show it in table form. I want instead of 1 column in a table row show 5 columns in a table row.

Can I do that? If yes, then how would look kendo grid html template and data for it?

Upvotes: 0

Views: 2416

Answers (1)

A. Gladkiy
A. Gladkiy

Reputation: 3450

So, the result is the following:

HTML template (table header is hidden):

<kendo-grid [data]="gridData">
    <ng-template ngFor [ngForOf]="columns" let-column>
        <kendo-grid-column field="{{column}}" [headerClass]="'hidden'">
            <ng-template kendoGridCellTemplate let-dataItem>
                <img *ngIf="dataItem[column].avatarUri != null" [src]="dataItem[column].avatarUri" [alt]="dataItem[column].keywords" />
             </ng-template>
        </kendo-grid-column>
    </ng-template>
</kendo-grid>

TypeScript component:

gridData: any[];
columns: string[] = ["column0", "column1", "column2", "column3", "column4"];

ngOnInit() {
    this.avatarService.getAvatars()
        .subscribe((avatars: Array<Avatar>) => {
            this.gridData = [];
            let i = 0;
            while (i < avatars.length) {
                let obj = {};
                for (let column of this.columns) {
                    obj[column] = {
                        avatarUri: i >= avatars.length ? null : avatars[i].avatarUri,
                        keywords: i >= avatars.length ? null : avatars[i].keywords
                    };
                    i++;
                }
                this.gridData.push(obj);
            }
        });
}

Also helped that link with dynamic columns.

Upvotes: 1

Related Questions