Chris
Top achievements
Rank 1
Rank 1
I have the code below. The column titled "Hair Color" shows the value properly. However "Hair Color2", which uses a template, does not. Note that both versions of "Last Name" work fine. So the issue appears to be something to do with using a template and a nested field. How can I make this work?
Here is a StackBlitz demonstrating the issue: https://stackblitz.com/edit/angular-phpipy-9tnfas?file=src%2Fapp%2Fapp.component.ts
Here is a StackBlitz demonstrating the issue: https://stackblitz.com/edit/angular-phpipy-9tnfas?file=src%2Fapp%2Fapp.component.ts
<kendo-grid [data]="data">
<kendo-grid-column field="id" title="id"></kendo-grid-column>
<kendo-grid-column field="firstName" title="First Name"></kendo-grid-column>
<kendo-grid-column field="lastName" title="Last Name"></kendo-grid-column>
<kendo-grid-column field="hair.color" title="Hair Color"></kendo-grid-column>
<kendo-grid-column title="Last Name2">
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem['lastName'] }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column title="Hair Color2">
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem['hair.color'] }}
</ng-template>
</kendo-grid-column>
</kendo-grid>
data = [
{
"id": 101,
"firstName": "Abbi",
"lastName": "Jones",
"email": "ajones123@aol.com",
"correctiveLens": false,
"hair": { "color": "Blond", "type": "Curly" },
"birthdate": "2/23/1981",
"startTime": "8:15 PM"
},
{
"id": 1,
"firstName": "Terry",
"lastName": "Medhurst",
"email": "atuny0@sohu.com",
"correctiveLens": true,
"hair": { "color": "Black", "type": "Strands" },
"birthdate": "12/1/1981",
"startTime": "12:05 AM"
},
{
"id": 2,
"firstName": "Sheldon",
"lastName": "Quigley",
"email": "hbingley1@plala.or.jp",
"correctiveLens": false,
"hair": { "color": "Blond", "type": "Curly" },
"birthdate": "12/1/1981",
"startTime": "12:00 AM"
},
{
"id": 3,
"firstName": "Terrill",
"lastName": "Hills",
"email": "rshawe2@51.la",
"correctiveLens": true,
"hair": { "color": "Blond", "type": "Very curly" },
"birthdate": "12/1/1981",
"startTime": "12:00 AM"
}
];
1 Answer, 1 is accepted
0
Accepted
Hi Chris,
Thank you for the provided details.
The developer can use the following syntax, to access nested object properties:
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem['hair']['color'] }}
</ng-template>Alternatively:
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.hair.color }}
</ng-template>I hope this helps.
Regards,
Martin Bechev
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!