Question

0

405

Views

AG grid with related footer buttons

I am looking at adding footer buttons to my AG Grid and want them to be related to the grid rows i.e. I want them to be either enabled/disabled based on certain row-specific data.

I am not sure if that would require a custom implementation OR if there is some out-of-the-box support within Ag-grid ?

ISSUE

class CustomPinnedRowRenderer {
  init(params) {
    this.eGui = document.createElement('div');
    this.eGui.innerHTML = `<button id='editBtn'>Edit<button> <button id='deleteBtn' disabled>Delete<button>`;

  }

After executing the line this.eGui.innerHTML, I somehow get an unnecessary/extra button element, NOT sure why...so the actual innerHTML rendered after I inspect is as below;
<button id="editBtn">Edit</button><button> </button><button id="deleteBtn" disabled="">Delete</button><button></button>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T17:16:10.858Z

There's a few ways of achieving this:

if you have AG Grid enterprise then you could create your own Custom Status Bar Component
if you are using AG Grid community, you could leverage Pinned Rows to add an empty row at the top or bottom of the grid, and on that row display a Custom Cell Renderer with the controls you require

The key here is the following:

<AgGridReact
            // ...
            onRowSelected={(params) => {
              params.api.redrawRows({
                rowNodes: [params.api.getPinnedBottomRow(0)],
              });
            }}
            isFullWidthCell={(rowNode) => rowNode.rowPinned === 'bottom'}
            fullWidthCellRenderer={CustomPinnedRowRenderer}
            pinnedBottomRowData={[{}]}
          ></AgGridReact>

We are adding an empty pinned bottom row by providing an empty object.
I've also decided to enable Full Width Rows on the pinned row, meaning that the cell renderer component will span the entire width of the grid and not use columns. You can disable this if you wish.
When a row is selected, we redraw the pinned row to force it to refresh using the grid event onRowSelected, so that the logic to disable the button can be recomputed

const CustomPinnedRowRenderer = memo((props) => {
  const selectedNodes = props.api.getSelectedNodes();

  const isFirstRowSelected =
    selectedNodes.filter((node) => node.rowIndex === 0).length > 0;
  return (
    <button disabled={isFirstRowSelected}>
      enabled only if first row is selected
    </button>
  );
});

See this implemented in the following Plunkr

0

405

AG grid with related footer buttons

1 answers

0

Find remote jobs

Andres GPT