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/ )

Answer 1

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!

Answer 2

这里的最终解决方案是JSBin ，添加了回调函数gridApi.selection.on.rowSelectionChangedBatch ，该回调函数用户可以使用“全选”按钮，并且所选列表将被更新。