Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
118
rated 0 times [  119] [ 1]  / answers: 1 / hits: 17592  / 8 Years ago, fri, november 25, 2016, 12:00:00

Target



I've got a UI Grid. When I click on a row it should get selected and a function with the row as a parameter should be called.



Current Approach



I use the following config code to generate the Grid:



$scope.gridOptions = {
enableFiltering: true,
enableRowHeaderSelection: false,
enableRowSelection: true,
multiSelect: false,
noUnselect: true,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.selection.on.rowSelectionChanged($scope, function (row) {
var name = row.entity.name;
$scope.addToQueue(name);
});
}
};


Problem



The above code works well when I actually change the selection (as the name of the function suggest). But it should be possible to add a row multiple times to the queue. So I want to call $scope.addToQueue(name) even when the row is already selected.


More From » angularjs

 Answers
20

For row to be selected, when it is clicked, I use following:



Use selectionCellTemplate for all columns:



 var selectionCellTemplate = '<div class=ngCellText ui-grid-cell-contents>' +
' <div ng-click=grid.appScope.rowClick(row)>{{COL_FIELD}}</div>' +
'</div>';

$scope.gridOptions.columnDefs = [
{ name: 'name', displayName: 'Name', width: '15%', cellTemplate: selectionCellTemplate },
];


And then define rowClick() method as:



 $scope.rowClick = function (row) {       
var index = row.grid.renderContainers.body.visibleRowCache.indexOf(row);
$scope.gridApi.selection.selectRow($scope.gridOptions.data[index]);
};


I have also defined multiselect to be true



$scope.gridOptions.multiSelect = true;


So row click will select the row and add it to the selected rows. you can access these selected rows as (It is triggered for each row select/unselect) :



$scope.gridOptions.onRegisterApi = function (gridApi) {
//set gridApi on scope
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, doSelection);
};

function doSelection(row) {
_.each($scope.gridApi.selection.getSelectedRows(), function (row) {
//Do something //It is triggered for each row select/unselect
});
}


Or selected rows can be accessed anytime:



  $scope.gridApi.selection.getSelectedRows()

[#59923] Wednesday, November 23, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
analiseb

Total Points: 252
Total Questions: 96
Total Answers: 106

Location: Singapore
Member since Sat, Jul 25, 2020
4 Years ago
analiseb questions
;