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

Use your column formatter to get this done.

var column = {id:delCol, field:'del', name:'Delete', width:250, formatter:buttonFormatter}

//Now define your buttonFormatter function
function buttonFormatter(row,cell,value,columnDef,dataContext){  
    var button = "<input class='del' type='button' id='"+ dataContext.id +"' />";
    //the id is so that you can identify the row when the particular button is clicked
    return button;
    //Now the row will display your button
}

//Now you can use jquery to hook up your delete button event
$('.del').live('click', function(){
    var me = $(this), id = me.attr('id');
    //assuming you have used a dataView to create your grid
    //also assuming that its variable name is called 'dataView'
    //use the following code to get the item to be deleted from it
    dataView.deleteItem(id);
    //This is possible because in the formatter we have assigned the row id itself as the button id;
    //now assuming your grid is called 'grid'
    grid.invalidate();        
});

Answer 2

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();
    }
});