Проблема при добавлении в dxDatagrid ⇐ Jquery

[Anonymous]

Я использую dxDataGrid devextreme(jquery).
У меня есть сетка основных сведений, в которой показаны страны и список городов каждой страны.
Когда я добавляю страну, это работает. но когда я нажимаю кнопку добавления городов, в консоли появляется ошибка, которую я не могу добавить.

В чем моя проблема?
$(function () {
$("#gridCountry").dxDataGrid({
dataSource: {
store: {
type: "array",
key: "ID",
data: countries
}
},
columns: [{
dataField: "CountryLatinName",
caption: "Country Name(Latin)"
}],
editing: {
mode: "form",
allowUpdating: true,
allowDeleting: true,
allowAdding: true
},
masterDetail: {
enabled: true,
template: function (container, options) {
var country = options.data;
container.addClass("internal-grid-container");
$("").text(country.CountryLatinName).appendTo(container);
$("")
.addClass("internal-grid")
.dxDataGrid({
editing: {
mode: "form",
allowUpdating: true,
allowDeleting: true,
allowAdding: true
},
columnAutoWidth: true,
columns: [{
dataField: "CityLatinName",
caption:"City Name(Latin)"
}, {
dataField: "GMT",
dataType:"number"
}, {
dataField:"Capital",
dataType: "boolean"
}],
dataSource: country.Cities
}).appendTo(container);
}
}
});
});


это моя ошибка: Uncaught TypeError: невозможно прочитать свойство «0» неопределенного значения, и это массив стран:

var countries = [{
"ID": 3,
"CountryLatinName": "Turkey",
"PhonePrefixes":"+90",
"Cities": [{
"ID": 30,
"CityLatinName": "Ankara",
"GMT": "+3:00",
"Capital": true
}, {
"ID": 31,
"CityLatinName": "Istanbul",
"GMT": "+3:00",
"Capital": false
}, {
"ID": 32,
"CityLatinName": "Bodrum",
"GMT": "+3:00",
"Capital": false
}, {
"ID": 33,
"CityLatinName": "Izmir",
"GMT": "+3:00",
"Capital": false
}]
}];


Подробнее здесь: https://stackoverflow.com/questions/426 ... dxdatagrid