Search code examples
javascriptjqueryslickgrid

get wrong instance with binding to onSelectedRowsChanged for Multiple SlickGrid


I got two slickGrids in one object:

instances: {
  registered: {
    selector: '##one',
    slickGrid: null
  },
  registeredPending: {
    selector: '##two',
    slickGrid: null
  }
}

Both of them are filled with data gotten from an AJAX request and the grid is created:

success: function(ajaxData) {
    var data = [];
    // ... parse ajaxData to data

    //instance is either instances.registered or instances.registeredPending
    instance.slickGrid = new Slick.Grid(instance.selector, data, grid.columns, grid.options);
    instance.slickGrid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
    instance.slickGrid.registerPlugin(checkboxSelector) //Add checkbox plugin
    instance.slickGrid.onSelectedRowsChanged.subscribe(function(e, data){
        //data.grid is last created slickGrid instance, instead of slickGrid of selected rows
        //It seems data.rows are the selected rows of the right slickGrid table!
    }
}

Everything works fine only the subscribtion to an onSelectedRowsChanged event does not work as supposed to be. The event does respond well, but it returns the last created instance instead of the instance of the changed rows.

Edit

To be clear, both instances are made after a succes callback of a AJAX event. So in my case, two calls are made, both return data; after that a grid is created to represent the data.


Solution

  • I found the problem after I read this Google Group page: https://groups.google.com/forum/#!topic/slickgrid/mKZzBxl2cVM.

    I did have two instances, but both of them registered the Checkboxselectcolumn plugin with the same checkboxSelector variable. So the results got intertwined.

    Knowing that, fixing it was easy. Add a variable per instance:

    instances: {
       registered: {
         selector: '##one',
         slickGrid: null,
         checkboxSelector: new Slick.CheckboxSelectColumn({ cssClass: "slick-cell-checkbox" })
       },
       registeredPending: { ... }
    }
    

    And use that one when registering your plugin.

    success: function(ajaxData) {
       ...
       instance.slickGrid.registerPlugin(instance.checkboxSelector)
    }