Access nested property in Kendo Grid - kendo-ui

Question

Following is the kendo grid where the nested property has to be accessed:
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: constants.AppUrls.GetUrls().WebApi + "gprScoreprofiel/GetProfielen/" + e.data.id
},
serverPaging: false,
serverSorting: false,
serverFiltering: false,
sortable: { mode: 'single' },
pageSize: 5,
schema: {
type: "json",
data: "items",
model: {
fields: {
isBerekend: { from: "isBerekend", type: "boolean" },
GPR: { from: "gprGebouwVersieId", type: "string" },
En: { from: "en", type: "number" },
Mi: { from: "mi", type: "number" },
Gz: { from: "gz", type: "number" },
Gb: { from: "gb", type: "number" },
Tk: { from: "tk", type: "number" },
Dpg: { from: "dpg", type: "number" },
VariantNaam: { from: "variant.naam", type: "string" }
}
}
}
},
dataBound: function (e) {
},
reorderable: true,
resizable: true,
sortable: true,
columnMenu: false,
scrollable: true, //http://www.telerik.com/forums/max-height-on-grid
pageable: {
refresh: true,
pageSizes: ["All", 10, 20, 50, 100, 200],
buttonCount: 5,
messages: {
display:
"{0} - {1} van {2} adressen", //{0} is the index of the first record on the page, {1} - index of the last record on the page, {2} is the total amount of records
empty: "Geen adressen",
page: "Page",
of: "of {0}", //{0} is total amount of pages
itemsPerPage: "adressen per pagina",
first: "Ga naar de eerste pagina",
previous: "Ga naar de vorige pagihna",
next: "Ga naar de volgende pagina",
last: "Ga naar de laatste pagina",
refresh: "Herlaad"
}
},
columns:
[
{ field: "isBerekend", title: "Berekend", template: "#= isBerekend ? 'Ja' : 'Nee' #" },
{ field: "GPR", title: "GPR versie" },
{ field: "En", title: "Energie" },
{ field: "Mi", title: "Milieu" },
{ field: "Gz", title: "Gezondheid" },
{ field: "Gb", title: "Gebruik" },
{ field: "Tk", title: "Toekomst" },
{ field: "Dpg", title: "Energie en Milieu" },
{ field: "VariantNaam", title: "Variant Naam" }
]
}).data("kendoGrid");
}
On accessing the api we get the following data:
{
"resultaatgegevens": null,
"items": [
{
"isBerekend": true,
"gprGebouwBerekeningId": 37391,
"gprGebouwVersieId": 10,
"gebruikersdoelId": 1,
"gebruikersdoel": "Celfunctie",
"gebruikstypeId": 9,
"gebruikstype": "Twee onder een kap woning",
"bouwjaarKlasseId": 6,
"gemiddeld": 7.0,
"en": 8.4,
"en1": 8.9,
"en2": 6.6,
"en3": 0.0,
"mi": 6.0,
"mi1": 6.6,
"mi2": 6.2,
"mi3": 5.9,
"gz": 6.9,
"gz1": 5.9,
"gz2": 6.9,
"gz3": 7.5,
"gz4": 7.0,
"gb": 7.5,
"gb1": 6.2,
"gb2": 6.7,
"gb3": 10.0,
"gb4": 6.7,
"tk": 6.2,
"tk1": 6.3,
"tk2": 5.6,
"tk3": 6.6,
"dpg": 0.0,
"dpg1": 0.0,
"bouwjaarKlasse": null,
"gprGebouwVersie": null,
"gprScoreprofielByVastgoedItems": null,
"variant": {
"id": 10,
"naam": "VariantId10",
"omschrijving": "VariantId10",
"gprScoreprofielen": null
}
},
{
"isBerekend": false,
"gprGebouwBerekeningId": 0,
"gprGebouwVersieId": 11,
"gebruikersdoelId": 28,
"gebruikersdoel": "Woonfunctie",
"gebruikstypeId": 3,
"gebruikstype": "portiekwoning 1965 1974",
"bouwjaarKlasseId": 3,
"gemiddeld": 5.2,
"en": 5.9,
"en1": 6.0,
"en2": 5.6,
"en3": null,
"mi": 5.0,
"mi1": 5.4,
"mi2": 4.0,
"mi3": 4.8,
"gz": 4.4,
"gz1": 4.5,
"gz2": 4.2,
"gz3": 4.8,
"gz4": 4.2,
"gb": 5.1,
"gb1": 6.0,
"gb2": 6.0,
"gb3": 3.0,
"gb4": 5.4,
"tk": 5.6,
"tk1": 6.0,
"tk2": 6.0,
"tk3": 4.8,
"dpg": null,
"dpg1": null,
"bouwjaarKlasse": null,
"gprGebouwVersie": null,
"gprScoreprofielByVastgoedItems": null,
"variant": null
}
],
"page": 1,
"pageSize": 1000,
"total": 0,
"hasMore": false
}
The grid doesn't work due to variant.naam

Answer 1

From the docs:
A field configuration cannot contain nested fields' configurations.
So, you have two options:
Change your API to return the nested properties in the same level as the items, e.g.: variantnaam;
Or do it in the Javascript before the widget renders it in schema.parse, something like:
schema: {
data: "items",
parse: function(data) {
if (data && data.items) {
var key = "variant";
data.items.forEach((i) => {
if (i[key]) {
Object.keys(i[key]).forEach((k) => {
i[key + k] = i[key][k];
});
}
});
}
return data;
}
}
Demo