Getting selected rows from ng-grid AngularJS

In this post you are going to learn how to get the selected rows from ng-grid in AngularJS.

Read our previous posts on ng-grid: ng-grid in AngularJS

If you are using a ng-grid then you may need to get the selected rows. You can do this using selectedItems property.

Based on the ng-grid document(http://angular-ui.github.io/ng-grid/) selectedItems is the property of ng-grid .

Consider you have a ng-grid like below.

<body ng-controller="MyngGridCtrl">
        <div class="ngGridStyle" ng-grid="myGrid">
        </div>
</body>

and your javascript would be

$scope.myData=[{ ID:1, Name:'John',Country:'USA'},
            {ID:2, Name:'Sachin' , Country:'India'},
            { ID:3, Name:'Smith' , Country:'UK'} ];

 //define a array to hold selected rows
$scope.selectedRows=[];

$scope.myGrid={
            data:'myData',
    selectedItems:$scope.selectedRows
};

Now you can use $scope.selectedRows array to show the selected rows like below.

<body ng-controller="MyngGridCtrl">
        <div class="ngGridStyle" ng-grid="myGrid">
<pre>{{selectedRows}}</pre>
        </div>
</body>

Selecting single row in ng-grid:

If you want your users to click on only one row(single row) of ng-grid then you can do it by using  "multiSelect: false" property. By default the multiSelect property will be set to true so that grid allows us to click on more than one row.

To disable multiSelect of ng-grid then change your javascript to

$scope.myGrid={
            data:'myData',
multiSelect:false,
     selectedItems:$scope.selectedRows
};

Now to show the selected value use below code

<body ng-controller="MyngGridCtrl">
        <div class="ngGridStyle" ng-grid="myGrid">
<pre>{{selectedRows}}</pre>
        </div>
</body>

As we are having single record in our $scope.selectedRows array we are using selectedUsers[0] (First record of the array)

In this way you can get the selected rows form ng-grid in AngularJS

Hope it helps you.

For more useful posts on AngularJS visit: AngularJS

7 comments:

  1. Nice post, thanks. How would you catch the selected event when a selected row changes?

    ReplyDelete
  2. Hi Manu. Thanks for the comment. There are some Grid Options like "afterSelectionChange" and "beforeSelectionChange". These are the Callbacks for when you want to validate something after/before selection.

    ReplyDelete
  3. For more info please look at the github doc on ng grid: http://angular-ui.github.io/ng-grid/

    ReplyDelete
  4. I want to delete the selected rows, with just one button click, button is somewhere outside the grid. is it possible ?

    ReplyDelete
    Replies
    1. After selecting multiple rows, all these rows are added to $scope.selectedRows array. So after clicking on delete button(which is independent of grid as you mentioned) call a delete method on scope. In your scope you already have all the rows (in $scope.myData array) and selected rows in $scope.selectedRows. So just compare two arrays and delete the selected rows from your main array. Hope it helps you. If you have any other queries feel free to comment.

      Delete
  5. can some one help me to find the count of the selected items.

    ReplyDelete
    Replies
    1. If you set the multi select to true you can select multiple rows. All these selected rows are added to your $scope.selectedRows array. Then you can check the length of the array to know the count of selected items.

      Delete