AG-Grid RowStyle Behavior

Question

Let's say I have an AG Grid with basic, common columns, column definitions, and a basic grid display. But I want to add a button to my page that allows me to swap between the basic, common grid view to something like a card view.

I have this working, but the problem is that the getRowStyle call isn't properly updating - it runs on load, but doesn't run on swap, or at least doesn't appear to (regular grid displays fine, swapping back to card view removes 10px gap). I'm not sure if I need to add an additional listener, maybe, or defer my return for x milliseconds, or what.

This is in pure vanilla AG-Grid - not React or Angular (we're actually using Sencha, but that's a different can of worms altogether).

Any suggestions?

Plunker

for me, everything works on your sample. Or how it should work (every btn-click change the styles and getRowStyle called). Check it by yourself getRowStyle: function(params) { console.log('rowstyle');return adjustRowStyle(params); }, — un.spike
Yes the demo works except that each row is not spaced apart like they are on first load. Should be a 10px gap per function adjustRowStyle when in card view. — Lazerblade

Lazerblade Lazerblade · Accepted Answer · 2018-09-27T17:22:08

Looks like I solved my own problem. After some tinkering and looking through the prototype, I found the function I was looking for on the child I wasn't looking at, until I was...

gridOptions.api.forEachNode(function (node) {
  node.setRowTop((node.rowHeight + 10) * node.rowIndex);
});

Plunker

AG-Grid RowStyle Behavior

1 Answers