Overview

ag-Grid 2.0 is is a significant step forward for ag-Grid. The internals have been reworked to support Web Components and Angular 2. For example, the interface into the grid is now clearly separated into events (data out), properties (data in), callbacks (queries out) and an API (other interaction). To get these changes in required reworking the interface. The heart of the grid is still the same, but to get your application working with ag-Grid 2.0 will require some small changes, mostly just method renames.

Previous the interface into ag-Grid was modelled around ui-Grid. This was done as I wanted a low barrier to entry for my 'new on the scene' grid. Now that ag-Grid has a very large following, plus I have learnt a lot recently, I believe the new interface to be better suited to the future (Web Components and AngularJS 2).

If your interested you can read the best practices for Web Components to understand why I made these interface changes.

I have also moved away from Angular Grid and towards ag-Grid with the naming. This includes a new (mirrored) website www.ag-grid.com.

The remainder of this page goes through the breaking changes.

angular-Grid -> ag-Grid

All distribution files (.css and .js) are now ag-Grid eg ag-Grid.js and ag-Grid.css. So change where you include the ag-Grid files to the new names.

NPM Only: NPM package is now ag-grid, not angular-grid as before. So install into NPM as:
npm install ag-grid

AngularJS 1.x Only: Angular module is now agGrid, not angularGrid. So to include the module use:
var yourSexyModule = angular.module("yourSexyModuleName", ["agGrid"]);

Javascript Only: ag-Grid global func is now agGridGlobalFunc. So to create grid from Javascript:
agGridGlobalFunc('#myGrid', gridOptions);

Events

Before, there were only 'events' for the column changes, and all other data out of the grid (eg cellClicked) came via callbacks. Now all data from the grid works as follows:

• All data out of the grid comes via events.
• There is one eventing system for the entire grid, it's not exclusive to columns.
• To listen for an event, either:
  a) Register interest with api.addEventListener(eventName, listener)
  b) provide the relevant onXXX() handler method in the gridOptions.

The new pattern is similar to how native DOM entities work.

Steps to upgrade are as follows:

• Previously column events were registered with columnApi and grid events were registered by overriding onXXX() methods in gridOptions. Now both are the same, you have the choice of onXXX or addEventListener method.
• Event names for columns have changed as follows:
  everything -> columnEverythingChanged
  pivot -> columnPivotChanged
  value -> columnValueChanged
  pinnedCountChanged -> columnPinnedCountChanged
  The following have not changed: columnMoved
  columnVisible
  columnGroupOpened
  columnResized
  
• All event handler methods on gridOptions now start with 'on'. For example, rowClicked(event) is now called onRowClicked(event).

Note the the onXXX(event) handler takes a parameter. This parameter is the same event that gets passed to the event listener registered with addEventListener.

Selection

Selection works the same, but the selected rows are no longer provided in gridOptions. The selected rows are available from the following locations:

• The selection event contains both selectedRows and selectedNodesById.
• The grid api has methods getSelectedNodes(), getSelectedNodesById() and getSelectedRows() for getting the current selection.

Data coming out of the grid via Events, and not via shared scope, is the way of the future (cough AngularJS 2 and Web Components).

forEachInMemory / getVirtualRowCount

forEachInMemory() and getVirtualRowCount() are used a lot by people, and not for the purpose I intended. So to align the grid with what you guys are using it for, I have added the following:

• forEachNode(callback): replaces forEachInMemory.
• forEachNodeAfterFilter(callback): for iterating through all nodes after filter is applied.
• forEachNodeAfterFilterAndSort(callback): for iterating after filter and sort is applied.

People were using the rowModel and virtualRow methods to get the rows after sort and filter, which was not great. The virtualRow methods are still there and you can stay using, but I'd recommend the methods above for getting data after sort and filter.

dontUseScrolls -> forPrint

dontUseScrolls is now called forPrint. I implemented this feature for making printable versions of the grid (hence no tool panel etc). It also gave the grid variable height (based on number of rows) but was not a good solution for achieving this on a web page. I will solve the 'variable row height' as a separate feature shortly.

The feature still works the same so you can still use it (it's just a name change), however I wanted to make the name change so we are all on the same page, no confusion, forPrint is for printing the grid. If you find another use for it and you find it isn't great for that other use, that's not a problem with the grid so don't raise it in the forum!!

onNewRows, onNewCols, onNewDatasource

The methods onNewRows(), onNewCols() and onNewDatasource() are now gone. The correct way to tell the grid that there are new rows, cols or datasource is to use the setRowData(), setColumnDefs() and setDatasource(). The old way was my attempt to mimic how ui-Grid works by sharing $scope items, however I'm no longer interested in that. The new way allows Web Component and AngularJS 2 bound properties (yeeah haa!!!).

Web Component agile-grid

The web component tag was "<agile-grid>". This is now changed to "<ag-grid>". Sorry about that, I was high on mushrooms when I thought 'agile' was where I was going with the name.

Module awk -> ag

For those using TypeScript definitions, you will notice the top most module name was "awk". It is now "ag". Again I was taking drugs with awk.