title: Assigning functions to multiple slickgrids
body: <p>Please help to solve this very annoying problem. I am using a for loop to iterate over an array of data and create multiple grids. It is working well but the filter function is not binding properly (it only binds to the LAST grid created) Here is the code:</p>
  
  <pre><code>// this function iterates over the data to build the grids
  function buildTables() {
  
  // "domain" contains the dataset array
  for (i = 0; i &lt; domains.length; i++) {
      var dataView;
      dataView = new Slick.Data.DataView();
      var d = domains[i];
      grid = new Slick.Grid('#' + d.name, dataView, d.columns, grids.options);
      var data = d.data;
  
  
      // create a column filter collection for each grid - this works fine
      var columnFilters = columnFilters[d.name];
  
      // this seems to be working just fine
      // Chrome console confirms it is is processed when rendering the filters
      grid.onHeaderRowCellRendered.subscribe(function (e, args) {
          $(args.node).empty();
          $("&lt;input type='text'&gt;")
             .data("columnId", args.column.id)
             .val(columnFilters[args.column.id])
             .appendTo(args.node);
      });
  
      // respond to changes in filter inputs
      $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
          var columnID = $(this).data("columnId");
          if (columnID != null) {
  
              // this works fine - when the user enters text into the input - it 
              // adds the filter term to the filter obj appropriately
              // I have tested this extensively and it works appropriately on 
              // all grids (ie each grid has a distinct columnFilters object
              var gridID = $(this).parents('.grid').attr('id');
              columnFilters[gridID][columnID] = $.trim($(this).val());
              dataView.refresh();
          }
      });
  
  
      //##### FAIL #####
      // this is where things seem to go wrong
      // The row item always provides data from the LAST grid populated!!
      // For example, if I have three grids, and I enter a filter term for
      // grids 1 or 2 or 3 the row item below always belongs to grid 3!!
      function filter(row) {
          var gridID = $(this).parents('.grid').attr('id');
          for (var columnId in grids.columnFilters[gridID]) {
              if (columnId !== undefined &amp;&amp; columnFilters[columnId] !== "") {
                  var header = grid.getColumns()[grid.getColumnIndex(columnId)];
                  //console.log(header.name);
              }
          }
          return true;
      }
  
  
      grid.init();
      dataView.beginUpdate();
      dataView.setItems(data);
      dataView.setFilter(filter); // does it matter than I only have one dataView instance?
      dataView.endUpdate();
      grid.invalidate();
      grid.render();
  </code></pre>
  
  <p>In summary, each function seems to be binding appropriately to each grid except for the filter function. When I enter a filter term into ANY grid, it returns the rows from the last grid only. </p>
  
  <p>I have spent several hours trying to find the fault but have to admit defeat. Any help would be most appreciated. </p>