How to add a custom delete option for backgrid rows

Question

i have developed editable grid using backgrid and it looks good also. following is my output :

when i select the check box and click on delete icon, then the selected rows are deleted.

now i also would like to have the delete option on each row so that the user can delete the row directly.

How to put delete icon on each row.??

Answer 1

You can make a custom cell.

var DeleteCell = Backgrid.Cell.extend({
    template: _.template(" PUT YOUR HTML BUTTON TEMPLATE HERE "),
    events: {
      "click": "deleteRow"
    },
    deleteRow: function (e) {
      e.preventDefault();
      this.model.collection.remove(this.model);
    },
    render: function () {
      this.$el.html(this.template());
      this.delegateEvents();
      return this;
    }
});