lascoff
lascoff

Reputation: 1331

Angular ui-grid row selection call function

I am adding a ui-grid and want to be able to select a row and call a function. I also need to send to the function the data from the entire row (only a couple of columns are actually displayed), however I need the complete row passed to the function.

here are my options for the grid so fa:

    $scope.gridOptions = {
        enablePaginationControls: false,
        paginationPageSize: 25,
        multiSelect: false,
        columnDefs: [
            {
                name: 'userInfo.firstName',
                displayName: "First Name",
            }, {
                name: 'userInfo.lastName',
                displayName: "First Name"
            }
        ]
    };

Upvotes: 1

Views: 4269

Answers (1)

Kathir
Kathir

Reputation: 6196

You have to use ui-grid-selection directive on the html and enable the row selection property on the gridOptions. Once you do that the row selection can be captured and the entire row data can be used for further processing.

 $scope.gridOptions = {
 enableRowSelection: true,
        enablePaginationControls: false,
        paginationPageSize: 25,
        multiSelect: false,
        columnDefs: [
            {
                name: 'userInfo.firstName',
                displayName: "First Name",
            }, {
                name: 'userInfo.lastName',
                displayName: "First Name"
            }
        ]
    };

     $scope.gridOptions.onRegisterApi = function( gridApi ) {
        $scope.gridApi = gridApi;
           gridApi.selection.on.rowSelectionChanged($scope,function(row){
            var msg = 'row selected ' + row.isSelected;

            //Call your method here with the row object. row.entity will give the data.
          });
      };

In the html you need to add the ui

<div ui-grid="gridOptions" ui-grid-selection class="grid"></div>

A working model is here with out the call

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

Upvotes: 3

Related Questions