Cannot call method 'exitEditMode' of undefined

[zeropaper]

I had the following error

Uncaught TypeError: Cannot call method 'exitEditMode' of undefined backgrid.js?bust=1373995691863:2288
Backgrid.Body.Backbone.View.extend.moveToNextCell backgrid.js?bust=1373995691863:2288
triggerEvents backbone.js?bust=1373995691863:206
Backbone.Events.trigger backbone.js?bust=1373995691863:146
_.extend._onModelEvent backbone.js?bust=1373995691863:933
triggerEvents backbone.js?bust=1373995691863:207
Backbone.Events.trigger backbone.js?bust=1373995691863:147
Backgrid.InputCellEditor.CellEditor.extend.saveOrCancel backgrid.js?bust=1373995691863:663
jQuery.event.dispatch jquery.js?bust=1373995691863:3074
jQuery.event.add.elemData.handle

with something like that

    // ....
    initialize: function(options) {
      options = options || {};
      this.grid = new Backgrid.Grid({
        columns: [
          {
            name: '',
            cell: Backgrid.Extension.SelectRowCell,
            headerCell: Backgrid.Extension.SelectAllHeaderCell
          },
          {
            name: 'id',
            className: 'id',
            label: 'Person ID',
            cell: 'id',
            editable: false,
            sortable: false
          },
          {
            name: 'year',
            className: 'year',
            label: 'Year',
            cell: 'integer',
            editable: false,
            sortable: true
          },
          {
            name: 'quality',
            className: 'quality',
            label: 'Quality',
            cell: 'integer',
            sortable: true
          },
          {
            name: 'contact',
            label: 'Contact',
            cell: 'integer',
            sortable: true
          }
        ],
        collection: this.collection // <- PageableCollection instance
      });
   },
   //...

I did consider making a fork... but for 3 lines of duckpunch fix..

Backgrid.Cell.prototype.exitEditMode = function () {
  this.$el.removeClass("error");
  if (this.currentEditor) { // 1
    this.currentEditor.remove();
  } // 2
  this.stopListening(this.currentEditor);
  delete this.currentEditor;
  this.$el.removeClass("editor");
  this.render();
};



Backgrid.Body.prototype.moveToNextCell = function (model, column, command) {
  var i = this.collection.indexOf(model);
  var j = this.columns.indexOf(column);
  if (j < 0) {return;} // 3

  if (command.moveUp() || command.moveDown() || command.moveLeft() ||
      command.moveRight() || command.save()) {
    var l = this.columns.length;
    var maxOffset = l * this.collection.length;

    if (command.moveUp() || command.moveDown()) {
      var row = this.rows[i + (command.moveUp() ? -1 : 1)];
      if (row) row.cells[j].enterEditMode();
    }
    else if (command.moveLeft() || command.moveRight()) {
      var right = command.moveRight();
      for (var offset = i * l + j + (right ? 1 : -1);
           offset >= 0 && offset < maxOffset;
           right ? offset++ : offset--) {
        var m = ~~(offset / l);
        var n = offset - m * l;
        var cell = this.rows[m].cells[n];
        if (cell.column.get("renderable") && cell.column.get("editable")) {
          cell.enterEditMode();
          break;
        }
      }
    }
  }

  this.rows[i].cells[j].exitEditMode();
};

I thought it would be a bit to much :)

BTW: thanks a lot for the awesome lib!

[wyuenho]

No need for forks. This is fixed on master BTW. See #177.

[zeropaper]

Crazy.. I searched for that issue.. sorry for the dup

[wyuenho]

No worries!

[sprugman]

I'm getting this error when I exit edit mode for the second time.

• edit a cell
• esc or enter or tab
• everything seems to work
• edit the cell again
• Uncaught TypeError: Cannot call method 'exitEditMode' of undefined backgrid.js:2289

I'm pretty sure my backgrid config is fairly standard:

        cols = {
            name: {
                name: 'name',
                label: 'Name',
                cell: 'string',
                editable: false
            },
            duedate: {
                name: 'duedate',
                label: 'Due',
                cell: 'date',
                editable: true
            },
            description: {
                name: 'description',
                label: 'Description',
                cell: DescriptionCell,
                editable: false
            },
            links: {
                name: 'links',
                label: 'Links',
                cell: HTMLCell,
                editable: false
            },
            rank: {
                name: 'rank',
                label: 'Rank',
                cell: 'string',
                editable: false
            }
        };
        columns = _(cols).values();
        grid = new Backgrid.Grid({
            columns: columns,
            collection: collection,
        });

(Note that duedate is the only editable cell.)

[wyuenho]

@sprugman use master.

[sprugman]

Master gas no lib folder and I ran into problems when I tried to build. Guess I'll try again.

[wyuenho]

https://github.com/wyuenho/backgrid/blob/master/CONTRIBUTING.md#building

No need to install JSDuck if you just want to build the libs. Just type npm dist

[vip32]

i'm having about the same issue as @sprugman. i can edit multiple cells, no problem if i leave with enter or mouse click. using the cursor keys cause the following error:

Cannot call method 'remove' of undefined > backgrid.js:817

i.m using 0.2.6 via bower and chrome latest

[wyuenho]

Use master.

[morficus]

I'm running into the same error, but not consistently (Uncaught TypeError: Cannot call method 'exitEditMode' of undefined - line 2474)
As suggested above, I'm not using code from the Master branch (as of Nov 7th) and still on Backbone 1.0.0

I did some poking around, and here is what I found (hopefully it will be useful):

  moveToNextCell: function (model, column, command) {
    var i = this.collection.indexOf(model);
    var j = this.columns.indexOf(column);
    var cell, renderable, editable;

    this.rows[i].cells[j].exitEditMode();

The value of j is -1, which is really crazy because if I manually inspect this.column by doing this.column.toJSON() I see that matching column. Same applies if I do this.column.findWhere(column.toJSON(), I do get back an entry with matching attributes.

[imrane]

same issue as @morficus and I get the value of j as -1 as well. It works the first time, but the second time you enter edit mode it errors out

I'm on the latest commit - 12718ac although I haven't built the project but that shouldn't matter should it as I am using lib/backgrid.js

@morficus - were you able to solve this
@wyuenho - ideas?

[wyuenho]

@imrane No idea because I can't reproduce it (again?), it's been fixed ages ago in #177. Also, please upgrade all your dependencies to the lastest version. Backgrid's minimal dependency is Backbone 1.1.0, anything older isn't supported.

If you are sure you can reproduce this, at least give me a jsfiddle or codepen or something. Use http://rawgithub.com/ as a proxy to get around jsfiddle's warning.

[imrane]

@wyuenho - I am on Backbone 1.1.0, Underscore 1.5.2, Backbone Pageable 1.4.3 and Jquery 1.10.2
I think @morficus can help me out more, it appears I run across this error when I change pages and come back...I was also able to find the model with findWhere

[morficus]

@imrane - I put a mini-hack in place to work around this.
let me dig up that bit of code and I'll a gist with it (along with a more detailed explanation of how I was running into this).

[morficus]

As promised a few days back, here is the gist I created for @imrane which details out my (what I think is) very specific situation as well as the dirty dirty (oh God, so dirty) hack that I put in place to get around it: https://gist.github.com/morficus/b7b9e8a03be274eb1169

imrane confirmed that the hack worked for him as well.
Hopefully this will help somebody who is smarter than me figure out the real problem as find a better/cleaner solution.

[bruno-c]

Thanks @morficus that should help us out a lot to figure out what is happening.

[wyuenho]

@morficus check the comment on your gist