Can't get listview edit mode to work in AngularJS

[Chris]

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):

<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>

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.

[Petur Subev]

Hello Chris,

It looks like the uid is missing from the row that you are using.

Could you please try to add the uid attribute like this to the template:

data-uid='#=uid#'

Here is an example that I used and it seems to be working all fine.

http://dojo.telerik.com/@pesho/eSoSe

In order to say what exactly goes wrong please demonstrate your case or provide a live URL which we can visit.

Let me know you findings.

Kind Regards,
Petur Subev
Telerik

 

 

[Chris]

So I did some more digging and I think the problem is the fact that I've got nested datasources and maybe this isn't supported in Kendo.

I have a grid that is bound to a datasource (call it DS1).  Each row in the grid has a data-uid.

When I edit a grid row using the template in my previous post, the listview gets data bound to an array property on the dataItem for the grid row:  k-data-source="dataItem.Params.url".  This creates a second datasource (call it DS2).

Editing a row in the list view then results in a call DS2.getByUid(grid row uid).  This obviously fails because the uid belongs to the grid's datasource (DS1) and not to the listview datasource (DS2).

Adding data-uid='#=uid#' to the listview template just results in the listview rows getting the uid of the parent grid row.  I suspect that even if I could get the correct uid to pass to DS2, the parent datasource (DS1) would not get updated correctly.

[Chris]

I figured it out.  Had to change my datastructure slightly:

{
        "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"},
                {"url": "http://b.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"},
                {"url": "http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"}
         ]
}

Having an array of strings rather than an array of objects with named fields was causing uids not to be generated for the listview items.

[Petur Subev]

Hello Chris,

On I side note I would suggest you to try to escape the #= # expressions like \\#= \\#. Thus the expression will be skipped by the outer Grid and evaluated as expected by the inner one.

Anyway I am glad you find a way to workaround this.

Kind Regards,
Petur Subev
Telerik