I have the following data structure:
{
"Id": "568124DB-8702-4717-A4C5-CF069A4B0491",
"Hive": "global",
"HiveQualifier": null,
"Name": "OpenCycle OSM",
"Description": "OpenStreetMap layer from opencyclemap.org",
"Type": "OSM",
"IsBaseLayer": true,
"Params": {
"url": [
"http://a.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://b.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"
]
}
}
I'm editing it with the following template (in a grid if it matters):
The array of URLs displays just fine, but when I click the edit button I get an error in the console:
Uncaught TypeError: Cannot read property 'uid' of undefinedkendo.all.js:57092
kendo.ui.DataBoundWidget.extend.editkendo.all.js:57175
(anonymous function)jquery-2.1.1.min.js:3
n.event.dispatchjquery-2.1.1.min.js:3
n.event.add.r.handle
I have no idea how to troubleshoot this.
{
"Id": "568124DB-8702-4717-A4C5-CF069A4B0491",
"Hive": "global",
"HiveQualifier": null,
"Name": "OpenCycle OSM",
"Description": "OpenStreetMap layer from opencyclemap.org",
"Type": "OSM",
"IsBaseLayer": true,
"Params": {
"url": [
"http://a.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://b.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"
]
}
}
I'm editing it with the following template (in a grid if it matters):
<script id="map-layer-editor" type="text/x-kendo-template">
<table style="width: 100%;border-collapse: separate;border-spacing: 10px;">
<tr>
<td class="label-cell"><label>Name</label></td>
<td><input type="text" class="k-input k-textbox" style="width: 100%;" name="Name" ng-model="dataItem.Name"></td>
</tr>
<tr>
<td class="label-cell"><label>Description</label></td>
<td><input type="text" class="k-input k-textbox" style="width: 100%;" name="Description" ng-model="dataItem.Description" /></td>
</tr>
<tr>
<td class="label-cell"><label>Base Layer</label></td>
<td><input type="checkbox" name="IsBaseLayer" ng-model="dataItem.IsBaseLayer" /></td>
</tr>
<tr>
<td class="label-cell"><label>Type</label></td>
<td><select kendo-drop-down-list style="width: 200px;" k-data-source="mlc.layerTypes"
k-data-text-field="'DisplayName'" k-data-value-field="'Id'"
ng-model="dataItem.Type"></select>
</td>
</tr>
<tr>
<td class="label-cell"><label>URLs</label></td>
<td>
<div kendo-list-view id="listView" k-data-source="dataItem.Params.url"
k-editable="true" k-navigatable="true" style="height:300px; width:100%;">
<div k-template style="display:flex; flex-direction: row; align-items:center; margin:5px;">
<div style="display:inline-block;width:400px;word-wrap: break-word">{{ dataItem }}</div>
<a style="align-self: flex-end;" class="k-button k-button-icontext k-edit-button kendo-command-notext"><span class="k-icon k-edit"></span></a>
<a style="align-self: flex-end;" class="k-button k-button-icontext k-delete-button kendo-command-notext"><span class="k-icon k-delete"></span></a>
</div>
<div k-edit-template style="display:flex; flex-direction: row; align-items:center; margin:5px;">
<input type="text" ng-model="dataItem" class="k-textbox" name="URL" required="required" validationMessage="required" />
<a style="align-self: flex-end;" class="k-button k-button-icontext k-update-button kendo-command-notext"><span class="k-icon k-update"></span></a>
<a style="align-self: flex-end;" class="k-button k-button-icontext k-cancel-button kendo-command-notext"><span class="k-icon k-cancel"></span></a>
</div>
</div>
</td>
</tr>
</table>
</script>
<table style="width: 100%;border-collapse: separate;border-spacing: 10px;">
<tr>
<td class="label-cell"><label>Name</label></td>
<td><input type="text" class="k-input k-textbox" style="width: 100%;" name="Name" ng-model="dataItem.Name"></td>
</tr>
<tr>
<td class="label-cell"><label>Description</label></td>
<td><input type="text" class="k-input k-textbox" style="width: 100%;" name="Description" ng-model="dataItem.Description" /></td>
</tr>
<tr>
<td class="label-cell"><label>Base Layer</label></td>
<td><input type="checkbox" name="IsBaseLayer" ng-model="dataItem.IsBaseLayer" /></td>
</tr>
<tr>
<td class="label-cell"><label>Type</label></td>
<td><select kendo-drop-down-list style="width: 200px;" k-data-source="mlc.layerTypes"
k-data-text-field="'DisplayName'" k-data-value-field="'Id'"
ng-model="dataItem.Type"></select>
</td>
</tr>
<tr>
<td class="label-cell"><label>URLs</label></td>
<td>
<div kendo-list-view id="listView" k-data-source="dataItem.Params.url"
k-editable="true" k-navigatable="true" style="height:300px; width:100%;">
<div k-template style="display:flex; flex-direction: row; align-items:center; margin:5px;">
<div style="display:inline-block;width:400px;word-wrap: break-word">{{ dataItem }}</div>
<a style="align-self: flex-end;" class="k-button k-button-icontext k-edit-button kendo-command-notext"><span class="k-icon k-edit"></span></a>
<a style="align-self: flex-end;" class="k-button k-button-icontext k-delete-button kendo-command-notext"><span class="k-icon k-delete"></span></a>
</div>
<div k-edit-template style="display:flex; flex-direction: row; align-items:center; margin:5px;">
<input type="text" ng-model="dataItem" class="k-textbox" name="URL" required="required" validationMessage="required" />
<a style="align-self: flex-end;" class="k-button k-button-icontext k-update-button kendo-command-notext"><span class="k-icon k-update"></span></a>
<a style="align-self: flex-end;" class="k-button k-button-icontext k-cancel-button kendo-command-notext"><span class="k-icon k-cancel"></span></a>
</div>
</div>
</td>
</tr>
</table>
</script>
The array of URLs displays just fine, but when I click the edit button I get an error in the console:
Uncaught TypeError: Cannot read property 'uid' of undefinedkendo.all.js:57092
kendo.ui.DataBoundWidget.extend.editkendo.all.js:57175
(anonymous function)jquery-2.1.1.min.js:3
n.event.dispatchjquery-2.1.1.min.js:3
n.event.add.r.handle
I have no idea how to troubleshoot this.