[Solved] Editing grid in detail template throws javascript error in kendo.all.min.js (only in IE 10 and IE 11 browsers)

[Suraj]

When I edit a row in the detail grid, I get following javascript error: "SCRIPT5007: Unable to get property 'getAttribute' of undefined or null reference". Please refer to this jsfiddle. This error is only generated in IE 10 and IE 11 browsers. The fiddle works fine on Chrome, Firefox and IE 9. 

[Vladimir Iliev]

Hello Suraj,

The JavaScript error is thrown due to invalid configuration of the both grids. I would suggest to check the following demo in our documentation for example of how to achieve the desired behavior:

• Hierarchy with editable detail grid

Regards,
Vladimir Iliev
Telerik

 

 

[Suraj]

Hello Vladimir,

The demo is not in MVVM. I would really appreciate if you can point out the invalid configuration my js fiddle. Also, the fiddle works fine in browsers except IE 10 and 11. Thanks.

Regards,
Suraj

[Vladimir Iliev]

Hello Suraj,

The provided demo is not MVVM, however the logic which makes possible editing of the navigation property is nested inside the "detailInit" event and the dataSource configuration of the chid grid. The same configuration can be used in your case as well - please check the most important points from the demo:

- Master grid dataSource "change" event:

OnChange: function(e) {
  if (e.field && e.field.indexOf("Orders.results") >= 0) {
    preventBinding = true;
  }
}

- global variable used in above event:

var preventBinding = false,

- Master grid "dataBinding" event:

OnDataBinding: function(e) {
  if (preventBinding) {
    e.preventDefault();
  }
  preventBinding = false;
}

- Function used inside the child grid dataSource custom transport read / update / destroy operations:

function detailInit(e) {
  //the function needs refference to the parent model available
  //in the datalInit event arguments:
  var findByID = function (id) {
    return e.data.Orders.results.find(function(item){
      return item.OrderID == id;
    });
  };

- Child grid custom transport read / update / destroy operations (these are responsible for correct updating of the master model without trowing the error):

transport: {
    read: function(options) {
        options.success(e.data.Orders.results.toJSON());
    },
    update: function(options) {
        var data = options.data,
            parentItem = findByID(data.OrderID);
        for (var field in data) {
            if (!(field.indexOf("_") === 0)) {
                parentItem[field] = data[field];
            }
        }

        e.data.dirty = true;
        options.success();
    },
    destroy: function(options) {
        var parentItem = findByID(options.data.OrderID);
        preventBinding = true;

        e.data.Orders.results.remove(parentItem);

        options.success();
    },
}

Regards,
Vladimir Iliev
Telerik