11

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.??

enter image description here

Dexygen
  • 12,287
  • 13
  • 80
  • 147
Java Questions
  • 7,813
  • 41
  • 118
  • 176

1 Answers1

27

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;
    }
});
Y.H Wong
  • 7,151
  • 3
  • 33
  • 35
  • 1
    Do you have a more complete example. I am totally new do backgrid and I have no idea what to do with this DeleteCell :-( – Ta Sas Jul 10 '13 at 21:38
  • Hi @y-h-wong I'm still having difficulties. If you could really be bothered looking up my problet: http://stackoverflow.com/questions/17612191/how-to-implement-delete-per-row-for-backgrid – Ta Sas Jul 12 '13 at 09:55
  • 1
    Awesome, though simple enough, but this is the only place this answer exists. +2 (if I could) – theunexpected1 Aug 10 '14 at 13:24