How can I integrate SlickGrid with Meteor.js reactive collections?

Question

SlickGrid focuses on displaying the data from a table or array, which is great. Meteor focuses on manipulating the data, but uses Minimongo. How can SlickGrid integrate with Min

Answer 1

Using Slick.Dataview would only duplicate some functionality (sorting, filtering, CRUD..) of your collections but you should check it out to see how it interacts with Slick.Grid.

If you look at Slick.Grid code you can see that it is only using 3 functions of Dataview .getLength(), .getItem() and .getItemMetadata() and last one is not mandatory to implement. So Slick.Grid is basically 'View' component only reading 'Data' (Dataview) but where is the 'Controller'?

Well you are to implement it actually and you can find one example in 'SlickGrid Example 4'.

Most important part of that example is in this snippet:

  // wire up model events to drive the grid
  dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
  });

  dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
  });

This 2 events (onRowCountChanged, onRowsChanged) will get fired when you add, remove, update rows in Dataview and using there functions you are passing that information to Grid.

So basic idea is to do the same for your Mongo.Collection and as far as I can see Mongo.Cursor has .observeChanges() that is somewhat similar to .onRowsChanged

Checkout SlickGrid API in source at the end of document.

To handle your Grid updates efficiently try using different invalidation methods .invalidate(All)Row(s)() and also .updateRow() and .updateCell() for even more precise control.

These are mostly methods to handle view updates:

  "render": render,
  "invalidate": invalidate,
  "invalidateRow": invalidateRow,
  "invalidateRows": invalidateRows,
  "invalidateAllRows": invalidateAllRows,
  "updateCell": updateCell,
  "updateRow": updateRow,
  "getViewport": getVisibleRange,
  "getRenderedRange": getRenderedRange,
  "resizeCanvas": resizeCanvas,
  "updateRowCount": updateRowCount,
  "scrollRowIntoView": scrollRowIntoView,
  "scrollRowToTop": scrollRowToTop,
  "scrollCellIntoView": scrollCellIntoView,
  "getCanvasNode": getCanvasNode,
  "focus": setFocus,

If you need user interaction with you Grid subscribe to events and update your collection accordingly.

  "onScroll": new Slick.Event(),
  "onSort": new Slick.Event(),
  "onHeaderMouseEnter": new Slick.Event(),
  "onHeaderMouseLeave": new Slick.Event(),
  "onHeaderContextMenu": new Slick.Event(),
  "onHeaderClick": new Slick.Event(),
  "onMouseEnter": new Slick.Event(),
  "onMouseLeave": new Slick.Event(),
  "onClick": new Slick.Event(),
  "onDblClick": new Slick.Event(),
  "onContextMenu": new Slick.Event(),
  "onKeyDown": new Slick.Event(),
  "onAddNewRow": new Slick.Event(),
  "onValidationError": new Slick.Event(),
  "onViewportChanged": new Slick.Event(),
  "onColumnsReordered": new Slick.Event(),
  "onColumnsResized": new Slick.Event(),
  "onCellChange": new Slick.Event(),
  "onActiveCellChanged": new Slick.Event(),
  "onActiveCellPositionChanged": new Slick.Event(),
  "onDragInit": new Slick.Event(),
  "onDragStart": new Slick.Event(),
  "onDrag": new Slick.Event(),
  "onDragEnd": new Slick.Event(),
  "onSelectedRowsChanged": new Slick.Event(),