Slickgrid - Replacing all grid data from AJAX source

Question 1

I've faced the same problem. Please, try the below code.

function updateGridView(){
  data_view.beginUpdate();
  data_view.setItems(update_data);
  data_view.endUpdate();
  data_view.refresh();
  grid.invalidate();
}
function grid_refresh(){
$.ajax("<cfoutput>#APPLICATION.site_prefix#</cfoutput>/_global/ajax/ajax_handlers.cfm",{
  dataType : "json",
  complete: function(xhr){
      update_data = eval(xhr.responseText);
      updateGridView();
  }
})
}

Just call the grid_refresh() function.

Question 2

I implemented something like this myself and here is how I have done it. I do use the dataview which will be wiped out every times and also the grid object which will be overwritten. I am not using your code, but instead I will show you the template which I use, I actually call the same function for loading & reloading but just make sure to empty() out the grid before you reload, see 1st line of code:

<div id="myGrid" style="width:100%;height:680px;"></div>

Then I made myself a button with an onclick event that looks something like this onclick=populateMyGrid() as a refresh button (it's actually a reload icon to make it nicer) and that event will call my function to reload the data through the $.getJSON() jQuery function, see the following code:

// Display some Market Indexes on a bar on top of the Grid 
function populateMyGrid() {
    // empty out the Grid before refreshing the data
    $('#myGrid').empty();

    // columns & options definition....
    columns = [ 
        { id: "village", ............
    ];
    options = {
       enableCellNavigation: true,              
        editable: true,
        ............
    };

    ajaxURL = 'myPhpAjaxFileToPullData.php?action=getdata';

    $.getJSON(ajaxURL, function (ServerResponse) {
        dataView = new Slick.Data.DataView();
        grid = new Slick.Grid('#myGrid', dataView, columns, options);
        ............

        // initialize the model after all the events have been hooked up
        dataView.beginUpdate();
        dataView.setItems(ServerResponse.data);
        dataView.endUpdate();

        // Refresh the data render, if user only clicked on the refresh button instead of refreshing the whole page from browser 
        grid.updateRowCount();
        grid.render();
    }); // end of getJSON        
} // end of populateMyGrid

From this code, the important part of it is to empty out the grid at first and then the last 2 rows of code for refreshing your grid with new data and make sure to re-render at last. That is the way I have it working, works like a charm...oh and I also display a text showing last refresh date+time, so it's more obvious to the user of how old the data is!

Even though it's not your code sample, you should get the idea...hope it helps :)

Also if you want to repopulate the grid with some kind of filtering you send the filtering via the ajaxURL of the $.getJSON or you could also replace it with a $.post and send it via the data property as your started, if you do it that way then move all your code into the success function (or a function call). Here is a possible solution for replacing the $.getJSON call... but please note that I did not try it but it should work:

//init the grid
$.ajax({
    type: "POST",
    url: '<cfoutput>#APPLICATION.site_prefix#</cfoutput>/_global/ajax/ajax_handlers.cfm',
    data: {'action': 'get_qol_report_data', 'villageID': villageID, 'settingID': settingID, 'hoodID': hoodID, 'itemID': 0, 'categoryID': 0},
    dataType: 'json',
    success : getData
});

function getData() {
    dataView = new Slick.Data.DataView();
    grid = new Slick.Grid('#myGrid', dataView, columns, options);
    ............

    // initialize the model after all the events have been hooked up
    dataView.beginUpdate();
    dataView.setItems(ServerResponse.data);
    dataView.endUpdate();

    // Refresh the data render, if user only clicked on the refresh button instead of refreshing the whole page from browser 
    grid.updateRowCount();
    grid.render();
}