CODEWITHSUNDEEP
angularjsng-gridangular-ui-grid
Michael
Michael

Reputation: 13616

How to make expandale only one row in ui-grid table

I use ui-grid in my project.

I am using expandable feature in ui-grid.

I need to make expandable only one row.

For example, if I click on '+' sign on row number 5 and then I click on '+' sign on row number 2 the row number 5 have to be closed and row number 2 have to be expanded.

Any idea how can I implement this behaviour in ui-grid?

Upvotes: 1

Views: 1948

Answers (2)

hamed Ashrafi
hamed Ashrafi

Reputation: 41

Overwrite main functionality to making angular UI Grid force to expand only one row at a time when expand/collapse bottom clicked..

search "toggleRowExpansion" inside ui-grid.js and then:

toggleRowExpansion: function (rowEntity) {

// --------- COMMENT THIS LINES: ---------

// var row = grid.getRow(rowEntity);
// if (row !== null) {
// service.toggleRowExpansion(grid, row);
// }


// --------- ADD THIS LINES: ---------

var row = grid.getRow(rowEntity);
   if (row !== null) {
   var isRowExpanded = row.isExpanded || false;
   service.collapseAllRows(grid);
   if(!isRowExpanded) service.toggleRowExpansion(grid, row);
   }
}

Upvotes: 1

imbalind
imbalind

Reputation: 1182

You should use the following api from the expandable feature:

  • rowExpandedStateChanged

This is an event raised whenever the expanded state is changed and can be used to intercept the user expanding another row.

  • toggleRowExpansion(rowEntity)

This can be used upon receiving the event to close any other expanded row.

Inside your code you should add this row inside of your gridOptions.onRegisterApi

gridApi.expandable.on.rowExpandedStateChanged(scope,function(row){})

Where function is a custom function where you scroll all the rows in the grid, check whether they are expanded or not by checking row.isExpanded and close every expanded row (but the one the user just expanded, obviously).

Just a reminder, as the team stated on the website, beware that the expandable feature is still in a alpha stage.

Upvotes: 2

Related Questions