Siatka danych Kendo - jak ustawić wartość kolumny z zagnieżdżonego obiektu JSON?

Question

Mam JSON ze strukturą tak:

"id":1, 
"user_role":"ADMIN", 
"state":"ACTIVE", 
"address":{ 
    "street":"test 59", 
    "city":"City test", 
    "post_number":"25050" 
}, 

Jak powinienem przekazać wartości address.street do kolumny stosując ustawienia w polach i modelu?

Wielkie dzięki za radę.

Answer 1

Jeśli chcesz wyświetlić wszystkie wartości w jednej kolumnie to, co sugeruje @RobinGiltner.

Jeśli chcesz pokazać każdemu członkowi address w innej kolumnie można zrobić:

var grid = $("#grid").kendoGrid({ 
    dataSource: data, 
    editable: true, 
    columns : [ 
     { field: "id", title: "#" }, 
     { field: "user_role", title: "Role" }, 
     { field: "address.street", title: "Street" }, 
     { field: "address.city", title: "City" }, 
     { field: "address.post_number", title: "Post#" } 
    ] 
}).data("kendoGrid"); 

tj .: używać address.street jak nazwa pola. To pozwoli ci nawet edytować pole, jak w przykładzie: http://jsfiddle.net/OnaBai/L6LwW/

Answer 2

Można użyć szablonu w definicji kolumny siatki, aby wyświetlić żądane fragmenty adresu.

{ field: 'address', title: 'Address', template: '#= address.street# #= address.city#, #= address.post_number# ' }, 

Zobacz dokumentację dla szablonu kolumny kendo. http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.template

See próbka na http://jsbin.com/gizab/1/edit

Answer 3

@OnaBai Dobra i intuicyjna odpowiedź. Niestety, Kendo nie zawsze działa tak dobrze z zagnieżdżonymi właściwościami w ten sposób. Na przykład formatowanie nie działa. Oto przykład użycia shema źródła danych do uzyskania dostępu do zagnieżdżonych właściwości. W ten sposób możesz używać formatowania, ale musisz określić model schematu.

var grid = $("#grid").kendoGrid({ 
    dataSource: { 
    data: data, 
    schema: { 
     model: { 
     id: "id", 
     fields: { 
      id: { type: "number" }, 
      user_role: { type: "string" }, 
      address_street: { from: "address.street" }, 
      address_city: { from: "address.city" }, 
      address_post_number: { 
      type: "number", 
      from: "address.post_number" 
      } 
     } 
     } 
    } 
    }, 
    columns: [{ 
    field: "id", 
    title: "#" 
    }, { 
    field: "user_role", 
    title: "Role" 
    }, { 
    field: "address_street", 
    title: "Street" 
    }, { 
    field: "address_city", 
    title: "City" 
    }, { 
    field: "address_post_number", 
    title: "Post#", 
    format: "{0:0#######}" 
    }] 
}).data("kendoGrid"); 

Jsfiddle: http://jsfiddle.net/wtj6mtz2

Zobacz także tym Telerik example dostępu do właściwości zagnieżdżonych.