CODEWITHSUNDEEP
jqueryslickgrid
user1415445
user1415445

Reputation: 263

Slickgrid redisplay grid after deleteItem

I have several SlickGrids that allow User to deleteItems (actually rows). This works fine but when User wants to cancel the deletion of the rows, I am not able to redisplay the entire grid. Here's the relevent code to remove the rows:

//  Modal Grid2 Remove rows
$('#removeBtnGrid2').click(function() {
    for (var i = 1; i <= 2; i++) {
        dataViewMG2.deleteItem(i);
    }
    invmodalgrid2.invalidate();
    invmodalgrid2.render();
});

and here's the code I'm using to redisplay the Grid (this doesn't work):

// XXXXXXXXXXXXXXXXXXXXXXX Load selected data into MODAL GRID 2 
$('#addBtnGrid1').click(function() {  /// this acts as a cancel btn
    dataViewMG2.beginUpdate();
    dataViewMG2.setItems(modaldata2);
    dataViewMG2.refresh();
    invmodalgrid2.render();
    dataViewMG2.endUpdate();
}

What am I doing wrong? Thanks

Upvotes: 0

Views: 2048

Answers (1)

ghiscoding
ghiscoding

Reputation: 13194

First of all you've put addBtnGrid1 when I think you meant (2) addBtnGrid2, second of all are you dealing with a server side to delete your row? Because that doesn't seem to be the proper way of dealing with it (though I have to admit I haven't tried your code). The way I'm dealing with a delete is directly embed the action on the ID itself inside the columns definition for the accept/cancel definition as for example this:

columns1 = [
            {id:'accnt_name', field:'accnt_name', name: "Account Name", width:90, sortable:true, sorter:sorterStringCompare} },
            {id:"id", name:"", field:"id", width:20, formatter: function (r,c,id,def,datactx){ return "<a href='#' onclick='if (confirm(\"Really Delete?\")) removeClick("+id+","+r+")'><img src='/images/deletex_16.png' border='0' /></a>";} }
        ];

and then the function to delete (which call the server side in PHP with AJAX) looks like this: 

function removeClick(databaseId, gridRow) {
        $.post('myajaxfile.php?action=delete', {id:databaseId}, function(ServerResponse) {
            // if database return an error then display it to the user and undo the cell change
            if(ServerResponse  === undefined) {
                alert("Deleting from database failed...");
            }else {
                if( parseInt(ServerResponse.affected_rows) < 1 || ServerResponse.error_msg != "" ) {                             
                    alert("Deleting from database failed...\n\nERROR Returned: "+ServerResponse.error_msg);
                }else {
                    // success, update the datagrid view on screen
                    var item = dataView1.getItem(gridRow);//RowNum is the number of the row
                    dataView1.deleteItem( item.id );//RowID is the actual ID of the row and not the row number
                    grid1.invalidate();
                    grid1.render();          
                }    
            }   
            $('#loading').hide(); // hide the loading logo                                                                        
        }, "json")
        .fail(function(ServerResponse) { 
            alert("Deleting from database failed...\n\nERROR Returned: "+ServerResponse.responseText);  
            $('#loading').hide(); // hide the loading logo             
        });      
    }

So I only refresh (render) the grid if the DELETE went good on the server side...Hope it helps! I don't think showing you the PHP file (server side) for deleting is necessary, but if you do then ask again...

Upvotes: 1

Related Questions