Can't get listview edit mode to work in AngularJS

5 posts, 0 answers
  1. Chris
    Chris avatar
    30 posts
    Member since:
    Oct 2010

    Posted 09 Feb 2015 Link to this post

    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.
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 11 Feb 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Chris
    Chris avatar
    30 posts
    Member since:
    Oct 2010

    Posted 11 Feb 2015 in reply to Petur Subev Link to this post

    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.




  5. Chris
    Chris avatar
    30 posts
    Member since:
    Oct 2010

    Posted 11 Feb 2015 Link to this post

    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.
  6. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 13 Feb 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready