Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular ui-grid event: row selected

I am trying to enable/disable a button based on the selection of a row on a ui-grid. If there are no rows selected, the button is disabled.

I found this plunkr with the old ng-grid way of firing an event after a row is selected.

  $scope.gridOptions = { 

  data: 'myData', 
  selectedItems: $scope.selections,
  enableRowSelection: true,

  afterSelectionChange:function() {
        if ($scope.selections != "" ) {
            $scope.disabled = false;
        } else {
            $scope.disabled = true;
        }
  }
};

Unfortunately it does not work, and I have found no sign of such event in the ui-grid documentation.

How can I achieve that with ui-grid?

like image 784
Pablo Avatar asked Mar 25 '15 03:03

Pablo


People also ask

How to get selected row in angular?

Select a row by clicking on it. Selecting a row will remove any previous selection unless you hold down Ctrl while clicking. Selecting a row and holding down Shift while clicking a second row will select the range.

How do you select a specific row in Ag grid?

Property rowSelection='multiple' is set to enable multiple row selection. Selecting multiple rows can be achieved by holding down Ctrl and mouse clicking the rows. A range of rows can be selected by using Shift .

How to select multiple rows using checkbox in angular?

Multiple Rows SelectionSelect the checkbox of each desired row, or. Press and hold Ctrl , and click the desired rows, or.

What is onRegisterApi in UI grid?

onRegisterApi is used to handle events. For example: If an edit is made, or a row is selected, you would use the onRegisterApi to catch the event and run some function. As for ordering, it doesn't matter if your gridOptions are created first, or the html DOM element.


1 Answers

In ui-grid, you register a callback function on the event "rowSelectionChanged"

 $scope.gridOptions.onRegisterApi = function (gridApi) {
                $scope.gridApi = gridApi;
                gridApi.selection.on.rowSelectionChanged($scope, callbackFunction);
                gridApi.selection.on.rowSelectionChangedBatch($scope, callbackFunction);
            }
 }

 function callbackFunction(row) { 
    var msg = 'row selected ' + row.isSelected; $log.log(msg); 
 })

I think you should take a look at the tutorial page in ui-grid: http://ui-grid.info/docs/#/tutorial/210_selection. The API page sucks, in my opinion :(.

like image 152
Huy Hoang Pham Avatar answered Sep 19 '22 07:09

Huy Hoang Pham