Mero
Mero

Reputation: 632

how to keep track of the order of selected rows in UI-Grid?

AM using UI-GRID in an angular project an am wondering is there a way to keep track of the order of selected rows (allowing the user to select/unselect rows) the order gridApi.selection.getSelectedRows() returns is not ideal to work with .Any ideas please ? http://plnkr.co/edit/gD4hiEO2vFGXiTlyQCix?p=preview . (the plnkr might help to highlight the issue if you select/unselect elements at random you will see the order how the elements are saved)

Upvotes: 1

Views: 688

Answers (1)

Tim Harker
Tim Harker

Reputation: 2407

I believe this might be close to what you want, Mero.

enter image description here

JavaScript/AngularJS Controller:

var app = angular.module('app', ['ui.grid', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.mySelections = [];
  $scope.mySelectionsInOrder = [];
  $scope.gridOnRegisterApi = function(gridApi) {
    gridApi.selection.on.rowSelectionChanged($scope, function(row) {
      $scope.mySelections = gridApi.selection.getSelectedRows();
      if (row.isSelected) {
        $scope.mySelectionsInOrder.push(row.entity);
      } else {
        $scope.mySelectionsInOrder.splice($scope.mySelectionsInOrder.indexOf(row.entity), 1);
      }
      console.log($scope.mySelections);
    });
  };
  $scope.gridOptions = {
    enableSelectAll: true,
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    enableFullRowSelection: true,
    showGridFooter: true,
    onRegisterApi: $scope.gridOnRegisterApi
  }
  $http.get('data.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });
}]);

The basic idea is to keep track of selections during the rowSelectionChanged event and determine with row.isSelected as to whether we should push or splice.

Here's a working Plunker, http://plnkr.co/edit/lnng9coOQHca3PzOSjQI?p=preview.

Hope this helps, let me know if you have any more questions.

Upvotes: 1

Related Questions