get a cell value in angular ui-grid

1
votes

I'm currently using angular ui-grid for my project to display 3 columns of data which will be retrieved as a JSON object through an API call.

I'm currently able to display the data the grid. Now, whenever the user clicks on a particular row, another API call is made sending the first column's respective cell value as query data. The response that is received is shown inside a modal window.

However, I'm not able to place a click event on the grid and retrieve the cell value when a particular row is clicked and hence unable to make the second API call correctly.

I guess a typical ng-click on the div won't serve my purpose as it doesn't capture the cell value.

Can someone please suggest how this functionality can be achieved?

Note: The cells are not editable. They are only read-only.

HTML

<div ui-grid="gridOptions" ui-grid-resize-columns ui-grid-exporter class="grid"></div>

JS

testFactory.getAPIData()
            .then(function(response){
                $scope.gridOptions.data = response.data;
            }), function(error){
                console.log("Factory error");
            }

        $scope.gridOptions = { 
            enableRowSelection: true, 
            enableRowHeaderSelection: false   
        };
        $scope.gridOptions.enableHorizontalScrollbar = 0;            

        $scope.gridOptions.columnDefs = [
                { field: 'id', name: 'ID', enableHiding: false },
                { field: 'name', name: 'NAME', enableHiding: false },
                { field: 'age', name: 'AGE', enableHiding: false }
        ];

        $scope.gridOptions.onRegisterApi = function (gridApi) {
            $scope.myGridApi = gridApi;
        };
3
javascriptangularjsangular-ui-grid

3 Answers

1
votes

You can grab the $scope of grid elements by using angular.element().data(). The $scope for the row container has the row property in it, which contains the rows entity.

Here is an example of binding mouseup to the grid, and looping through $scope.$parent until the row property is located. Then that row property can be used to make the API call, and do whatever you need to do with the response.

http://plnkr.co/edit/P52jJkPRuzmFUWq3Fheb?p=preview

1
votes

Is this what you want?

var rowCol = $scope.gridApi.cellNav.getFocusedCell();
  if(rowCol !== null) {
      $scope.currentFocused = 'Row Id:' + rowCol.row.entity.id + ' col:' + rowCol.col.colDef.name;
  }

Example from Plunker

If yes then you can go to the following website for more details: Details

Hope this helps you. Good luck ! ! !

1
votes

First you could register the Event inside your gridOptions.onRegisterApi

gridBodyElem.addEventListener('mouseup', handleGridClick);

then just add a function like this

function handleGridClick(evt) {
            var targetElem = angular.element(evt.target);
            var elemData = targetElem.data().$scope;
}