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?
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.
templateimplementation along with this. Here is an article about hyperlinks within the template aswell. And here is an example using Angular2. Hope this helps