Where can I get Angular ui-grid selected items

Question

Testing out Angular ui-grid (ng-grid v.3.0). Can not for the life of me find the selected row. I just want to grab the rows or even row ID of row when a user clicks it. Found the top comment here but I think this is outdated: Getting select rows from ng-grid?

Does anyone know where the gridOptions.selectedItems is being stored in 3.0?

score 36 · Accepted Answer · answered Oct 04 '14 at 01:33

Is this what your are looking for ? http://ui-grid.info/docs/#/tutorial/210_selection

Activate grid selection capabilities with the ui-grid-selection tag (and ui.grid.selection module registration in your app
register gridApi and use gridApi.selection to access getSelectedRows()

score 24 · Answer 2 · edited May 23 '17 at 12:10

24

In addition to the steps above https://stackoverflow.com/a/26188783/2658127, you might have to invoke it through a ng-click event to get the actual value/object. At least that's how I had it working.

Eg:
$scope.selectRow = function(){
    $scope.gridApi.selection.getSelectedRows();
};

And call selectRow() from the template.

This is for anybody who have been confused like I did, considering the fact that ui-grid does not have the best documentation (specially for this select portion).

edited May 23 '17 at 12:10

Community

1
1

answered Apr 01 '15 at 18:33

Rajush

635
6
10

1

Thanks Rajush, I appreciate the extra info! – Mlalahoi Apr 03 '15 at 16:11

score 16 · Answer 3 · edited Aug 31 '15 at 17:44

16

The easiest approach is:

Register the gridApi by adding this your controller:

$scope.gridOptions.onRegisterApi = function(gridApi) { $scope.myGridApi = gridApi; };
Access the array of selected items:

$scope.myGridApi.selection.getSelectedRows();

edited Aug 31 '15 at 17:44

albert

8,027
10
48
84

answered Aug 31 '15 at 16:34

Arashsoft

2,749
5
35
58

score 0 · Answer 4 · edited Jun 04 '16 at 14:51

With grid ui you have to use the selection.on.rowSelectionChanged to update a scope variable that store the selectedItem. In this way you can use the value in a binding expression.

var SelectController = function($scope) {
    ...
    $scope.selectedItem = null;

    $scope.gridOptions = {
            data : 'articles',
            enableRowSelection : true,
            multiSelect : false,
            enableRowHeaderSelection : false,
            ...
        };

        $scope.gridOptions.onRegisterApi = function(gridApi) {
            // set gridApi on scope
            this.$scope.gridApi = gridApi;
        }.bind(this);
        $scope.gridOptions.onRegisterApi = function(gridApi) {
            // set gridApi on scope
            this.$scope.gridApi = gridApi;
            this.$scope.gridApi.selection.on.rowSelectionChanged($scope,
                    function(row) {
                        this.$scope.selectedItem = row.entity;
                    }.bind(this));
        }.bind(this);

Use a an array instead of a plain object if you need multiple selection.

Where can I get Angular ui-grid selected items

4 Answers4

Linked