How do i create a delete button on every row using the SlickGrid plugin?

Question

How do i create a delete button on every row using the SlickGrid plugin? I need a button that can delete the whole corresponding row.

Answer 1

An alternative to using jQuery to bind to the click event is to use the onClick event of SlickGrid. Similar to (now deprecated) jQuery .live() or now .on() with delegated handlers, the use of onClick will allow the functionality to work without having to constantly reattach handlers when new rows are added, deleted, shown, etc.

Enhancing Jibi's example, replace the $('.del').live('click', function(){... with the following:

// assuming grid is the var name containing your grid
grid.onClick.subscribe( function (e, args) {
    // if the delete column (where field was assigned 'del' in the column definition)
    if (args.grid.getColumns()[args.cell].field == 'del') {
       // perform delete
       // assume delete function uses data field id; simply pass args.row if row number is accepted for delete
       dataView.deleteItem(args.grid.getDataItem(args.row).id);
       args.grid.invalidate();
    }
});