"SCRIPT16386: No such interface supported" when calling splice on array

[Ovidiu]

Hi,

I have an observable object that contains an array which is binded as a source to a div:

<div data-bind="source: Fields" data-template="field-template"></div>

where field-template looks like this:

<script id="field-template" type="text/x-kendo-template">
   <div>
      <div data-bind="text: FieldName"></div>
      <button data-bind="events: { click: removeField }">Remove</button>
   </div>
</script>

When I try to remove an element from an array by calling splice, kendo.web.js breaks in IE at line 6753. Apparently I would say the problem is at the source binding because at the specified line, element.children.length is 0 but this happens only in IE. In Chrome and Firefox element.children contains template instances for each element from the array. Why Internet Explorer breaks?

The MV looks as follows:

var SectionVM = function (section) {

    var self = this;

    this.Fields = [];

 

    if (section.Fields) {

        var fieldIndex = 0;

        $.each(section.Fields, function () {

            var field = this;

            var fvm = new FieldVM(field); // FieldVM is similar with this VM

            self.Fields.push(fvm);

        });

    }

 

    this.removeField = function (e) {
           var FieldIndex = self.get("Fields").indexOf(e.data);

        var removedItem = self.get("Fields").splice(FieldIndex, 1);

    }

     

    self = kendo.observable(this);

     

    return self;

}

and finally the binding:

var secVM = new SectionVM(someSection); // someSection it's an object comming from the server and matches the VM structure
kendo.bind($(".section"), secVM); // .section is a div wrapping the div with the source binding

Thank you!

<script id="field-template" type="text/x-kendo-template"><br>        <div><br>            <div data-bind="text: FieldName"></div><br>            <div><br>                  <button data-bind="events: { click: removeField }">Remove</button><br>                </div><br>            </div><br></script>




<script id="field-template" type="text/x-kendo-template"><br>        <div><br>            <div data-bind="text: FieldName"></div><br>            <div><br>                  <button data-bind="events: { click: removeField }">Remove</button><br>                </div><br>            </div><br></script>




[Nikolay Rusev]

Hello Ovidiu,

I've tried to reproduce the error in the following sample, but with no success. Can you modify it so that the error manifests itself: http://jsbin.com/itAh/1/edit

Things that might help us pin-point the issue:
 - IE version that you are testing
 - Kendo UI version that you are using

Regards,
Nikolay Rusev
Telerik

[Ovidiu]

Hello Nikolay,

After we did an update of the Kendo, we were not able to reproduce this issue anymore.