访问Kendo Grid中的嵌套属性

时间:2017-10-09 09:14:19

标签: kendo-ui kendo-grid

以下是必须访问嵌套属性的kendo网格:

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

在访问api时,我们得到以下数据:

{


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

由于variant.naam

,网格不起作用

1 个答案:

答案 0 :(得分:0)

来自docs

  

字段配置不能包含嵌套字段的配置。

所以,你有两个选择:

  1. 更改您的API以返回与项目相同级别的嵌套属性,例如:variantnaam;

  2. 或者在小部件在schema.parse中呈现它之前在Javascript中执行此操作,例如:

        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