Search code examples
datagridag-grid

Ag-grid dynamically span entire row


I have a grid that presents database entities one per row with some crud options (the crud options are icons in their own cells). When the delete button is clicked, the design calls for the entire row to be turned into a confirmation message with buttons to continue or cancel.

Apparently you can give a function for colSpan on each colDef. I tried giving the first colDef a span equal to the number of displayed columns in the case that the row data has a property isDeleting === true, while clicking the delete icon would set the row data's isDeleting property to true.

I was unable to get this to work, and even if I were to get it to work, I'd need to be able to dynamically change the cell so that it contains the confirmation message.

Any help is greatly appreciated.


Solution

  • After a very long day of searching, I found this article on "full-width" rows. You can provide your gridOptions with an isFullWidthCell function, plus fullWidthCellRenderer and fullWidthCellRendererParams properties, and the full width of the row will be populated using the renderer according to the params (as is the case with a cellRenderer in a ColDef)

    So, my delete button component can set a piece of data that the isFullWidthCell function can check for, and if it finds it, it will use the cellRenderer provided.

    AgGrid seems to have thought of everything.