Reputation: 1331
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
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