Ag-Grid expand row

9
votes

Im using Ag-grid to control my table, but i want in my group that stores a list of rows instead of having to make the row group expand in 2 clicks, i want to be on 1 click. If i click on the icon arrow it works, but if i click on the title row it only opens on 2 clicks.

I already tried to find in the documentation any information about it, but cant find nothing.

Here is a example from the documentation. https://ag-grid.com/javascript-grid-tree/index.php

example image: enter image description here

4
ag-grid

4 Answers

8
votes

We are now recommended not to use the onGroupExpandedOrCollapsed, so this should now be...

This will also update the icons and animate the rows, which onGroupExpandedOrCollapsed won't.

onRowClicked(params) {
    params.node.setExpanded(!params.node.expanded);
}

This will toggle the expansion, use params.node.setExpanded(true) if you want the rows to just stay open.

7
votes

You can listen to events on either a row or cell clicked, and expand nodes accordingly.

For example to expand a row based on a click you could do the following:

onRowClicked: (params) => {
    // update the node to be expanded
    params.node.expanded = true; 
    // tell the grid to redraw based on state of nodes expanded state 
    gridOptions.api.onGroupExpandedOrCollapsed(params.rowIndex)
}

This should be in the documentation - I'll update it to reflect this information.

1
votes

In the column definition, you can use the onCellClicked(params) function to tell it to do something when the cell is clicked. I tried looking for an expand function, but I could only find expandAll() which I don't think you will want. So what I would do is just use jquery or simple DOM selection to click on the expand icon inside of that cell.

0
votes

this one works

 onRowClicked(params) { 
    params.context.setExpand.onExpandClicked(params.rowIndex, params.node.rowHeight);
  }