Change Event not firing from splicing nested ObservableArray

4 posts, 0 answers
  1. Stacey
    Stacey avatar
    56 posts
    Member since:
    Aug 2013

    Posted 13 Nov 2013 Link to this post

    Using the following code, splicing the ObservableArray does not seem to appropriately fire the change event.
    kendo.data.ObservableArray.prototype.remove = function (value) {
         var array = this;
     
         $.each(array, function (idx, item) {
             if (item !== undefined) {
                 if (value.data.uid === item.uid) {
                     array.splice(idx, 1);
                     return true;
                 }
             }
         });
     }
    Now I call it like this, within the view model.

    onRemove: function (e) {
        e.data.parent().remove(e);
    }
    Where this function is on a nested child, so an array like this ...

    {
        Name: "Top Level",
        Collection: [
          {
            Name: "First Child",
            SubCollection: [
              {
                Name: "First Sub Child",
                onRemove: function (e) {
                    e.data.parent().remove(e);
                }
              },
              {
                Name: "Second Sub Child",
                onRemove: function (e) {
                    e.data.parent().remove(e);
                }
              }
            ]
          },
          {
            Name: "Second Child",
            SubCollection: [
              {
                Name: "Third Sub Child",
                onRemove: function (e) {
                    e.data.parent().remove(e);
                }
              },
              {
                Name: "Fourth Sub Child",
                onRemove: function (e) {
                    e.data.parent().remove(e);
                }
              }
            }
        ]
    }
    Using this templating...
    <div data-role="listview"
         data-template="tmpl-demo-first-child"
         data-bind="source: Collection"></div>
    <script type="text/html" id="tmpl-demo-first-child">
        <div>
             
            <h2 data-bind="text: Name"></h2>
            <div
                 data-role="listView"
                 data-template="tmpl-demo-sub-children"
                 data-bind="source: SubCollection"></div>
        </div>
    </script>
    <script type="text/html" id="tmpl-demo-sub-children">
        <div>
            <div
                 style="width: 120px;
                        float: left;
                        text-align: center;
                        font-size: 1.6em;
                        vertical-align: middle;"
                data-bind="text: Name, click: onRemove">
            </div>
        </div>
    </script>
    Using this setup, when I click on the sub child, with the intention to use its OnRemove function to remove it from its parent, it does update the actual view model, which is apparent because I can have the view model in a pane to the side with its change event subscribed, printing out the JSON. But the actual
    HTML doesn't update, because the item does not vanish from the DOM.

  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 15 Nov 2013 Link to this post

    Hi Stacey,

    this seems strange. I tried to reproduce the problem in this jsbin, and the remove function seems to work as expected. Am I missing something?

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Stacey
    Stacey avatar
    56 posts
    Member since:
    Aug 2013

    Posted 15 Nov 2013 Link to this post

    I am sorry, the jsbin you linked me - the remove function does not work in any browser. 
  4. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 19 Nov 2013 Link to this post

    Hello Stacey,

    I am sorry for misleading you, it looks like I posted the wrong example. Please check this one. I test by clicking the child items - they disappear, as expected.

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top