How to display data that is nested in one key using Kendo DataSource and template?

Question

If DataSource gets json that is formated this way:

[{
    "ProductID": 1,
    "ProductName": "Chai",
    "UnitPrice": 18,
    "UnitsInStock": 39,
    "Discontinued": false
}, {
    "ProductID": 2,
    "ProductName": "Chang",
    "UnitPrice": 19,
    "UnitsInStock": 17,
    "Discontinued": false
}, {
    "ProductID": 3,
    "ProductName": "Aniseed Syrup",
    "UnitPrice": 10,
    "UnitsInStock": 13,
    "Discontinued": false
}]

I can then display data in template that way:

#: ProductName#"

What if my json data is nested inside one key:

{"products":[
  {
    "ProductID":1,
    "ProductName":"colgate",
    "UnitPrice":"12.00"
  },
  {
    "ProductID":2,
    "ProductName":"colgate2",
    "UnitPrice":"12.00"
  }
]}

How to display data that is nested in one key? It can't be done by #: products.ProductName#"

---

I'm using "transport" field in DataSource

        var items = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "{{ path('api_products_list') }}",
                    dataType: "json"
                }
            },
            schema: {
                model: {}
            },
            pageSize: 14,
        });

---

How about kendoPager that also use this dataSource

        $("#pager").kendoPager({
            dataSource: items
        });

with dataSource changed to:

            schema: {
                data: "products"
            },

pager only show first page and don't recognize there are more of them. (But json products are above 200, and pageSize: 14,)

Answer 1

Define DataSource's property schema.data and set the property in your data which contains the array you want to work with:

dataSource: {
    data: {
        "products":[
        {
            "ProductID":1,
            "ProductName":"colgate",
            "UnitPrice":"12.00"
        },
        {
             "ProductID":2,
             "ProductName":"colgate2",
             "UnitPrice":"12.00"
        }]
    },
    schema: {
        data: "products"
    }
}

Demo or using templates.