title: Slickgrid - Replacing all grid data from AJAX source
body: <p>In the app I'm building, I have a data grid and some select boxes where the user can set filters and upon a selection it makes an AJAX call to get a new array of data from the server.</p>
  
  <p>I have the grid initializing with default filters, but I can't figure out how to wipe the grid of all rows, and re-populate with a fresh array. I was trying dataView, but after reading some posts this seems to not be the answer. I find the official example-6 (ajax example) confusing.</p>
  
  <p>I would like column sorting and column re-ordering to be retained when new data is loaded.</p>
  
  <p>Here is the js I currently have which only initializes properly:</p>
  
  <pre><code>$(function(){
  
      //update the grid when select values change
      $('#qol_options :input').change(function(){
          update_grid_data();
      });
  
  
      init_grid = function(){
  
          // set grid options 
          var grid;
          var columns = [
              {id: "village", name: "Village", field: "village", sortable: true},
              {id: "setting", name: "Setting", field: "setting", sortable: true},
              {id: "hood", name: "N.hood", field: "hood", sortable: true},
              {id: "timespan", name: "Time", field: "timespan", sortable: true},
              {id: "count_0", name: "0", field: "count_0", sortable: true, width: 10},
              {id: "count_1", name: "1", field: "count_1", sortable: true, width: 10},
              {id: "count_2", name: "2", field: "count_2", sortable: true, width: 10},
              {id: "count_3", name: "3", field: "count_3", sortable: true, width: 10},
              {id: "count_4", name: "4", field: "count_4", sortable: true, width: 10},
              {id: "count_6", name: "6", field: "count_6", sortable: true, width: 10},
              {id: "count_7", name: "7", field: "count_7", sortable: true, width: 10},
              {id: "count_8", name: "8", field: "count_8", sortable: true, width: 10},
              {id: "count_total", name: "Total", field: "count_total", sortable: true},
              {id: "pos_perc", name: "%", field: "pos_perc", sortable: true},
              {id: "decile", name: "Decile", field: "decile", sortable: true},
          ];
  
          var options = {
              enableCellNavigation: true,
              enableColumnReorder: true,
              multiColumnSort: true
          };
  
          //get default grid data (all)
          var grid_data = [{'village':0, 'setting':0, 'hood':0, 'timespan':0, 'count_0':0, 'count_1':0, 'count_2':0, 'count_3':0, 'count_4':0, 'count_6':0, 'count_7':0, 'count_8':0, 'count_total':0, 'pos_perc':0, 'decile':0}]; 
  
          //create the grid instance
          this_grid = new Slick.Grid("#data_table_container", grid_data, columns, options);
  
          update_grid_data();
      }
  
  
      update_grid_data = function(){
          var settingID = $('#settingID').val();
          var villageID = $('#villageID').val();
          var hoodID = $('#hoodID').val();
  
          //init the grid
          $.ajax({
              type: "POST",
              url: '&lt;cfoutput&gt;#APPLICATION.site_prefix#&lt;/cfoutput&gt;/_global/ajax/ajax_handlers.cfm',
              data: {'action': 'get_qol_report_data', 'villageID': villageID, 'settingID': settingID, 'hoodID': hoodID, 'itemID': 0, 'categoryID': 0},
              dataType: 'json',
  
              success: function(data) {
                  push_data_to_grid(data);
              }
          });
      }
  
  
      push_data_to_grid = function(data){
          this_grid.setData(data);
          this_grid.render();
      }
  
      //execute the grid init 
      init_grid();
  });
  </code></pre>