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.
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.