javascriptslickgridgolden-layout

Using Slickgrid Dataview in Goldenlayout


I can use Slickgrid with normal grids in GoldenLayout.

However, I am trying to implement Dataview and I'm having trouble with the onRowCountChanged.subscribe event:

var StockGridComponent = function (container, state) {

  this._dataView = new Slick.Data.DataView();

  this._container = container;
  this._state = state;
  this._grid = null;
  this._columns = [...];
  this._data = data;
  container.on('open', this._createGrid, this);

};

StockGridComponent.prototype._createGrid = function () {

  this._grid = new Slick.Grid(
    this._container.getElement(),
    this._dataView,
    this._columns,
    this._options
  );

  this._grid.setSelectionModel(new Slick.CellSelectionModel());

  this._dataView.onRowCountChanged.subscribe(function (e, args) {
    console.log(this);   <-- return DataView
    this._grid.updateRowCount();  <-- error: "Uncaught TypeError: Cannot read property 'updateRowCount' of undefined"
    this._grid.render();
  }
);

I think my problem is I don't know how to refer back to the object's _grid object (I'm not proficient with Javascript).

Anyone using Goldenlayout with SlickGrid Dataview can share how they create their SlickGrid components?

Thank you.


Solution

  • Seems more like a context issue to me. In the _createGrid method define the context of outer this in a variable and use that. Like

    StockGridComponent.prototype._createGrid = function () {
    
      this._grid = new Slick.Grid(
        this._container.getElement(),
        this._dataView,
        this._columns,
        this._options
      );
    
      this._grid.setSelectionModel(new Slick.CellSelectionModel());
      var self = this; // store the context and use later
    
      this._dataView.onRowCountChanged.subscribe(function (e, args) {
        console.log(this);   <-- this here will refer to context of callback method
        self._grid.updateRowCount();
        self._grid.render();
      }
    ); 
    

    Hope this fixes the issue.