kendo treeview displayname undefined code example

Example: kendo treeview displayname undefined

<div id="container">
    <div id="list-of-devices" class="devices"
         data-role="treeview"
         data-text-field='["DeviceGroupName", "DeviceName"]'
         data-bind="source: data">
     </div>
 </div>

<script>

var inline = new kendo.data.HierarchicalDataSource({
    data: [
        {
            "DeviceGroupId": 1,
            "DeviceGroupName": "Superdeluxe Devices",
            "Devices": [
                {
                    "DeviceId": 1000,
                    "DeviceName": "My First Device"
                },
                {
                    "DeviceId": 1001,
                    "DeviceName": "My Second Device"
                }
            ]
        }
    ],
    schema: {
        model: {
            children: "Devices"
        }
    }
});

var viewModel = kendo.observable({
    data: inline
});

kendo.bind($("#container"), viewModel);

</script>