I've been trying to implement a "delete" button for backgrid rows. A solution seems to be described here:

How to add a custom delete option for backgrid rows

However, I don't seem to get it working. Here is what I tried:

var DeleteCell = Backgrid.Cell.extend({
    template: _.template('<button>Delete</button>'),
    events: {
      "click": "deleteRow"
    },
    deleteRow: function (e) {
      console.log("Hello");
      e.preventDefault();
      this.model.collection.remove(this.model);
    },
    render: function () {
      this.el.html(this.template());
      this.delegateEvents();
      return this;
    }
});

and then using it like

var columns = [{
        name: "id", // The key of the model attribute
        label: "ID", // The name to display in the header
        editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
        renderable: false,
        // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
        cell: Backgrid.IntegerCell.extend({
            orderSeparator: ''
        })
    }, {
        name: "weight",
        label: "Hello",
        cell: DeleteCell
    },{
        name: "datemeasured",
        label: "DateMeasured",
        // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
        cell: "datetime" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
    },{
        name: "weight",
        label: "Weight",
        cell: "number" // An integer cell is a number cell that displays humanized integers
    }];

what I get is an error:

TypeError: this.el.html is not a function
[Break On This Error]   

this.el.html(this.template());

Any suggestions?

Thanks & cheers

I've been trying to implement a "delete" button for backgrid rows. A solution seems to be described here:

How to add a custom delete option for backgrid rows

However, I don't seem to get it working. Here is what I tried:

var DeleteCell = Backgrid.Cell.extend({
    template: _.template('<button>Delete</button>'),
    events: {
      "click": "deleteRow"
    },
    deleteRow: function (e) {
      console.log("Hello");
      e.preventDefault();
      this.model.collection.remove(this.model);
    },
    render: function () {
      this.el.html(this.template());
      this.delegateEvents();
      return this;
    }
});

and then using it like

var columns = [{
        name: "id", // The key of the model attribute
        label: "ID", // The name to display in the header
        editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
        renderable: false,
        // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
        cell: Backgrid.IntegerCell.extend({
            orderSeparator: ''
        })
    }, {
        name: "weight",
        label: "Hello",
        cell: DeleteCell
    },{
        name: "datemeasured",
        label: "DateMeasured",
        // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
        cell: "datetime" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
    },{
        name: "weight",
        label: "Weight",
        cell: "number" // An integer cell is a number cell that displays humanized integers
    }];

what I get is an error:

TypeError: this.el.html is not a function
[Break On This Error]   

this.el.html(this.template());

Any suggestions?

Thanks & cheers

• javascript
• backbone.js
• backgrid

Share Improve this question Follow edited May 23, 2017 at 12:29 CommunityBot 111 silver badge asked Jul 12, 2013 at 9:53 Ta SasTa Sas 9,8131515 gold badges5353 silver badges7474 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You are getting an exception because your trying to call the function on the wrong view property. Backbone views have two different ways to access it's el, either directly in the DOM or as a jQuery object as follows:

1. this.el - This is a direct reference to the DOM element.
2. this.$el - The jQuery object for the DOM element.

Its important to remember, that you need to call functions like append() and html() on the $el property as they are jQuery functions.

dcarson is correct of course but just to very plainly spell out the code for the render function that I was able to use to get this to work correctly, with this.$el substitued for this.el:

render: function () {
    this.$el.html(this.template());
    this.delegateEvents();
    return this;
}