Kendo data grid - how to set column value from nested JSON object?

Question

I have JSON with structure like this:

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

How I should to pass values of address.street into column using setting in fields and model?

Many thanks for any advice.

Answer 1

If you want to show all values in a single column do what @RobinGiltner suggests.

If you want to show each member of address in a different column you can do:

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

i.e.: use address.street as name of the field. This would allow you even to edit the field as in the example: http://jsfiddle.net/OnaBai/L6LwW/

Answer 2

@OnaBai Good and intuitive answer. Sadly Kendo doesn't always work to well with nested properties this way. For example formating doesn't work. Here is an example using data source shema to access nested properties. This way you can use formatting but you have to specify a schema model.

  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

See also this Telerik example for accessing nested properties.

Answer 3

You could use a template on the grid column definition to display whichever pieces of the address you wanted.

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

See documentation for kendo column template. http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.template

See sample at http://jsbin.com/gizab/1/edit