Angularjs Grid Pro
is a complete data grid for enterprise applications for angularjs framework -
has all the features
you ever need from a data grid.

It borrows all functionality of ParamQuery pro ( which is written in javascript/jQuery ) and is encapsulated in a directive for seamless
integration with angularjs framework.
For you as a developer, jQuery knowledge is optional and is not necessary for implementation of angularjs grid.

Next few sections would guide you to implement this grid with Angularjs framework.

When grid is initialized, it gets a new scope prototypically inherited from its parent scope
and the grid instance is added as a property to new scope as $scope.grid
which comes handy when we need to access grid api from any bindings or directives
( which have child scopes protypically inherited from grid's scope ) within in the grid.
And vice versa, the scope of the grid can be obtained from grid instance as grid.$scope
which is convenient when we need to access grid scope inside event handlers.

Controller As:

Dot notation or defining model variables as properties of objects is recommended over adding them directly to $scope to avoid
problems with setting model variable values from child scopes that prototypically inherit from parent scopes.
controllerAs offers a much cleaner solution by offering this variable inside the controller
so that the model variables can be declared as properties of this variable.

Cell binding:

Every row in grid gets a new scope prototypically derived from the grid scope when either
gridModel.ngModel.compileRows = true or there is a template property in any of the columns.
The row scope has properties:

If we need column specific properties in the cell templates, then we use render callback
and return template which has access to column specific properties e.g., colIndx, column, dataIndx through ui argument inside the render callback.
Note that it's required to add compileRows: true to ngModel in this case.

The context this in this case is controller. So to get access to grid that emits the event, we can pass grid as one
of the parameters to the event. This way of event binding also ensures that at least one $root $digest takes place
after call to event handler.

Whole data binding:

Two way data binding of the whole data in grid can be obtained by:

Assign data to an object property inside the controller i.e.,

vm.myData = data;

where vm is an object defined on the $scope or vm points to this variable inside the controller
when used with controllerAs syntax.

Assign model property name along with object name in dot notation as a string e.g., 'vm.myData' to
gridModel.dataModel.data.

gridModel.dataModel = { data: 'vm.myData' };

Observe gridModel changes: rebind

When gridModel properties change after initialization of grid, rebind attribute indicates grid to observe for those changes
and refresh view according to the changes.
rebind is passed to grid directive as an attribute whose value is the name of a single or more options ( separated
by empty space in latter case ) whose values are observed by the grid during every $digest.
Note that it is supported only for scalar properties currently.

<pq-grid rebind="height selectionModel.type"></pq-grid>

rebind has special value all which indicate that the grid should observe all scalar properties of the gridModel.

<pq-grid rebind="all"></pq-grid>

Custom Editors:

Custom editors are implemented by writing a directive and assigning it to column.editorTemplate
Directives are assigned a scope prototypically derived from grid scope and has following properties.

ui: An object having same ui properties received in callbacks of column.editor

Link function in the directives are supposed to attach editor object to scope having same properties as
column.editor.

Custom Validations:

Custom validations are implemented by writing a directive and assigning it to column.validations[].template
Directives are assigned a scope prototypically derived from grid scope and has following properties.