SlickGrid Data Grids

This tutorial is in many ways similar to Using Strelit Layout with HighCharts and Yahoo Finance. It illustrates how to wire the lifecycle of third-party components up with StrelitLayout.

Interactive Example

Resizing Behavior

Some components resize purely based on CSS (e.g. flexbox or percentage widths). Others, like SlickGrid or Highcharts, maintain internal canvas calculations or virtual scrolling buffers and require a notification when their bounding box changes.

In modern Strelit UI Kit, you can listen to resize directly on the ComponentContainer or attach a native ResizeObserver to container.element:

container.on('resize', function () {
  // Trigger SlickGrid's canvas recalculation
  grid.resizeCanvas();
  grid.autosizeColumns();
});

Implementation Details

Direct DOM Attachment via container.element

In modern Strelit UI Kit, container.element returns the native HTMLElement representing the component’s pane. You can pass it directly to the Slick.Grid constructor without jQuery wrappers:

var StockGridComponent = function (container, state) {
  this._container = container;
  this._state = state || {};
  this._grid = null;

  this._createGrid();
};

Binding Resize and Destruction Lifecycle

Always bind cleanup and resize logic to the container’s lifecycle events:

StockGridComponent.prototype._createGrid = function () {
  var self = this;

  // Mount SlickGrid directly to native container.element
  this._grid = new Slick.Grid(
    this._container.element,
    this._stockDataProvider.getStocksBySymbol(this._state.symbols),
    this._columns,
    this._options
  );

  // Handle container resize
  this._container.on('resize', function () {
    self._resize();
  });

  // Handle container teardown
  this._container.on('destroy', function () {
    self._destroy();
  });

  this._resize();
};

Destruction & Cleanup

Always include clean-up logic to release virtual scroll handlers and DOM references:

StockGridComponent.prototype._destroy = function () {
  if (this._grid) {
    this._grid.destroy();
    this._grid = null;
  }
};

Registering with StrelitLayout

Register the class using registerComponentConstructor or instantiate via registerComponentFactoryFunction:

var layout = new StrelitLayout(document.getElementById('layoutContainer'));
layout.registerComponentConstructor('stockGrid', StockGridComponent);

layout.loadLayout({
  root: {
    type: 'row',
    content: [
      {
        type: 'component',
        componentType: 'stockGrid',
        title: 'Live Ticker',
        componentState: { symbols: ['AAPL', 'MSFT', 'GOOGL'] },
      },
    ],
  },
});