Michael Michael - 2 months ago 58
AngularJS Question

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?

Answer

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.

Comments