ui-grid expandable one at a time - angular-ui-grid

Question

For example, if I click on '+' sign on row number 1 and then I click on '+' sign on row number 2 the row number 1 have to be closed and row number 2 have to be expanded.
This the code i have used for ui-grid
<div ui-grid="gridOptions" ui-grid-pinning ui-grid-expandable class="grid" ui-
pagination>

Answer 1

You can define a listener for the rowExpandedBeforeStateChanged event, like this :
vm.gridApi.expandable.on.rowExpandedStateChanged(null, function (row) {
If a row has been expanded, you can iterate through all the expanded rows and collapse any that don't match the hashKey of the row that's just been expanded. In practice, because of this logic, there should only be two expanded rows in play - the previously expanded one, and the newly expanded one.
You can use logic like this in the rowExpandedStateChanged event :
if (row.isExpanded) {
collapseAnyPreviouslyExpandedRow();
}
function collapseAnyPreviouslyExpandedRow() {
var expandedRows = vm.gridApi.expandable.getExpandedRows();
if (expandedRows.length > 1) {
angular.forEach(expandedRows, function (expandedRow, key) {
if (expandedRow.$$hashKey !== row.entity.$$hashKey) {
vm.gridApi.expandable.collapseRow(expandedRow);
}
});
}
}
This assumes that you have previously assigned a gridApi object to your controller using an onRegisterApi call like this one :
vm.yourGridConfigObject.onRegisterApi = function (gridApi) {
vm.gridApi = gridApi;