Geek Answers Handbook

How to integrate SlickGrid with reactive collections of Meteor.js?

SlickGrid focuses on displaying data from a table or array, which is great. Meteor focuses on data management, but uses Minimongo. How can SlickGrid integrate with Minimonogo collections and maintain its fast display and great data processing capabilities?

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

  • Sort: processed by Meteor, launches a full update (data reset)
  • add / update / remove: index calculation and its invalidity
  • Filtering: processed by Meteor, launches a full update (data reinstall)

How do I bind a Meteor data pointer directly to SlickGrid and only handle events with some glue code? Or can I use Slick.dataview? The goal is to process updates at the cell level.

+8
javascript meteor slickgrid minimongo
source share
1 answer

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

If you look at the Slick.Grid code, you will see that it uses only 3 functions of Dataview .getLength () ,. getItem () and .getItemMetadata (), and the latter is not required for implementation. So Slick.Grid is basically a “View” component, just a read “Data” (Dataview), but where is the “Controller”?

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

The most important part of this example is 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(); });

These 2 events (onRowCountChanged, onRowsChanged) will be fired when adding, deleting, updating rows in the Dataview and using the functions that you pass this information to the Grid.

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

Checkout the SlickGrid API at the source at the end of the document.

To handle your grid updates efficiently, try using various invalidation methods .invalidate (All) Row (s) (), as well as .updateRow () and .updateCell () for even more precise control.

These are mainly update processing methods:

  "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 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(),
+2
source share

More articles:


All Articles