how can a new row (record) be added to a ui-grid

Problem

I cannot find an answer to this in stackoverflow or an answer I can understand in github..the issue is simple..I want to be able to use ui-grid much as I would a datasheet or continuous forms in MS Access..I think I have editing sussed (at least on a cell by cell basis) and now I need to be able to add a new blank record (row) by clicking a button.

Is there an easy way to achieve this?

Ideally the code would make provision for setting values for certain fields for example a field which is a foreign key (for example if the user is adding line items to an order one would want the order id to be entered automatically via the underlying code rather than for the user to have to select from a dropdown list each time).

As always any answer will be appreciated.

Problem courtesy of: Richard Stanton-Reid

Solution

Please take a look at this plunker.

Adding row with button

More specifically look at this function within the controller and how it's called using the ng-click directive on the button html element:

$scope.addNewItem=function()
{
  $scope.data.push( { name: 'Test add ', title: 'Test add' });
};

After being clicked this is then reflected in the view. Of course you could customize this to append blank data, or data specific to the button the user clicked.

Solution courtesy of: user2263572

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.