Change Event not firing from splicing nested ObservableArray

[Stacey]

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.

[Petyo]

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

[Stacey]

I am sorry, the jsbin you linked me - the remove function does not work in any browser. 

[Petyo]

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