Angular ui.grid. Moving rows between two grids

Question

I recently started to use angular-ui-grid (http://ui-grid.info/) and tried to create solution for moving rows between two different grids (exactly this solution but this is done on kendo grid - http://jsfiddle.net/OnaBai/2qXKy/).

Since I'm pretty new to java script I failed to recreate this in angular-ui-grid. Have some troubles to assign selected rows of grid1 to grid2 and remove selected rows from grid1.

Does anyone have this solution ready?

Thanks in advance.

EDIT: I added quick NOT working jsfiddle (http://jsfiddle.net/LimoJoe/n9h7xmw3/4/)

Matt Matt · Accepted Answer · 2015-06-26T11:03:41

Here's a JSBin of how you could manage it with two controllers and a service. It's using ngGrid but should still be similar enough to ui.grid in this case.

Not that I think your problems are in how you are setting up the gridOptions, in your example I didn't see where you had set the gridOptions's '`selectedItems' property:

See edits:

 this.gridOptions = {
     data: 't2.items',
     /** NG Grid way
      selectedItems: [] 
     */
     /** UI Grid way */
     enableRowSelection: true,
     enableSelectAll: true,
     multiSelect: true,
     onRegisterApi: function(gridApi) {
         $scope.gridApi = gridApi;
         gridApi.selection.on.rowSelectionChanged($scope, function(rows) {
             angular.copy(gridApi.selection.getSelectedRows(), ctl.selectedItems);
         });
      }
 };

Edit:

Based on your comments, here's a fork of the article you referenced's plunkr which is the upgraded version. Hopefully you can use that as your starting point.

Basically to use ui-grid, starting from that article, you need to upgrade the version of angular and ui-grid.

Edit:

Ok, your JsBin was really close, I edited it, here's the new version, now it's an upgraded version of my original JsBin, I think we're there now!

Angular ui.grid. Moving rows between two grids

2 Answers