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 Minimonogo collections and preserve its fast display and large data handling capabilities?

My current way of doing it feels wrong and is somewhat ugly. I have a separate array for SlickGrid and writing some glue code to handle update events:

• Sorting: Handled by Meteor, triggers a full refresh (re-setting data)
• add/update/remove: figuring out the index and invalidating it
• Filtering: Handled by Meteor, triggers a full refresh (re-setting data)

How would I bind the Meteor data cursor directly to SlickGrid and handle only events with some glue code? Or can Slick.dataview be used? The goal is to handle updates on a cell level.

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(),