Using Slickgrid Dataview in Goldenlayout

Question

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.

score 0 · Accepted Answer · answered Jun 29 '17 at 06:20

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.

Using Slickgrid Dataview in Goldenlayout

1 Answers1